时间戳

首页 > 解决方案 > Javascript | 'element.style.display' 状态检查在'if gate' 中不起作用？

javascript - Javascript | 'element.style.display' 状态检查在'if gate' 中不起作用？

问题描述

我想制作一个按钮来更改 div 显示模式并更改按钮单击时的 innerHTML。

content2 的显示最初设置为“无”。

我的代码目前没有任何改变。

谢谢您的帮助。

Javascript

let button2 = document.getElementById('more-button-2');
let content2 = document.getElementById('more2');

   button2.onclick = function() {
        if (content2.style.display === 'none') {
            content2.style.display = 'block'; 
            button2.innerHTML = 'See less'; 
        } else if (content2.style.display === 'block') {
            content2.style.display = 'none'; 
            button2.innerHTML = 'See more' 
        } 
    };

HTML

    <div class='column'>
        <div class='column-content'>
            <h2>Two</h2>
            <p>Explanation.</p>
            <div class='more-button' id='more-button-2'>See more</div>
            <p id='more2'>More</p>
        </div>
    </div>

正如 Pointy 评论的那样，错误出在我的样式中，仅检查 html 定义的样式。

我已经编辑了代码来检查按钮 innerHTML，它现在可以工作了。虽然可能不是最佳实践......

button2.onclick = function() {
    if (button2.innerHTML === 'See more') {
        content2.style.display = 'block';
        button2.innerHTML = 'See less';
    } else if (button2.innerHTML === 'See less') {
        content2.style.display = 'none';
        button2.innerHTML = 'See more'
    } 
};

标签： javascriptif-statementonclickdisplay

解决方案

Element.stlyedisplay在使用Element.style.display = '...'或 in将其设置为元素之前没有属性html。得到准确的display使用价值getComputedStyle。并且还使用三元运算符而不是if-else

let button2 = document.getElementById('more-button-2');
let content2 = document.getElementById('more2');

button2.onclick = function() {
  let {display} = window.getComputedStyle(content2);
  content2.style.display = display === 'none' ? 'block' : 'none';
  button2.innerHTML = button2.innerHTML === 'See More' ? 'Show Less' : 'See More'
};
<div class='column'>
        <div class='column-content'>
            <h2>Two</h2>
            <p>Explanation.</p>
            <div class='more-button' id='more-button-2'>See more</div>
            <p id='more2'>More</p>
        </div>
    </div>

推荐阅读