Javascript |和#x27；element.style.display'；状态检查不执行'；t在'工作；如果门'；？

我想做一个按钮，改变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

---

Element.stlye

只有通过使用

Element.style.display='…'

或在

html

中将其设置为元素后，才具有

display

属性。要获取

display

的确切值，请使用

getComputedStyle

。也可以使用三元运算符，而不是

if-else

let button2=document.getElementById（'more-button-2'）；
让content2=document.getElementById（'more2'）；
button2.onclick=函数（）{
让{display}=window.getComputedStyle（content2）；
content2.style.display=display=='none'？'block'：'none'；
button2.innerHTML=button2.innerHTML===‘查看更多’？‘显示更少’：‘查看更多’
};

两个
解释

查看更多
更多
style

对象只包含直接在HTML元素上设置的样式信息。CSS规则所隐含的样式是不可见的；您必须使用

getComputedStyle（）

。添加/删除类以使这样的代码正常工作要简单得多。谢谢你的回答。我已经交换了if门来检查HTML中按钮的状态，现在它可以工作了。帖子更新了。我必须对style&get computedstyle命令的具体工作方式进行一些研究。再次感谢。顺便说一句，虽然这并没有回答您的具体问题，但更惯用的处理方法可能是更改某个父类，然后允许所有子类根据其在新类中的位置更新其CSS样式，而不是强制使用JavaScript。

    <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>

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'
    } 
};