Question

我有一个按钮和一个div下面，按钮必须显示这个div onclick，我写了这个功能，一切都很好，但它只适用于第二次点击，我无法弄清楚原因，这里是我的代码：

＆＃13;

function showDiv() {
    var x = document.getElementById('myDiv');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

＆＃13;

#myDiv{
display: none;
}

＆＃13;

<button type="button" class="btn btn-default" onclick="showDiv()">Show div</button>

<div id="myDiv">
test
test
test
test 
test
test 
</div>

＆＃13;

Answer 1

要获取通过样式表（或块）应用的值，您需要使用getComputedStyle()。 document.getElementById('myDiv').style.display只能读取内联样式。

＆＃13;

function showDiv() {
    var x = document.getElementById('myDiv');
    if ( window.getComputedStyle(x, null).getPropertyValue("display") === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

＆＃13;

#myDiv{
display: none;
}

＆＃13;

<button type="button" class="btn btn-default" onclick="showDiv()">Show div</button>

<div id="myDiv">
test
test
test
test 
test
test 
</div>

＆＃13;

Answer 2

你已经在css中设置了样式。所以x.style.display的值最初不是none.it wolud是空的。所以最初设置那个样式。或使用getComputedStyle获取CSS规则

＆＃13;

function showDiv() {
    var x = document.getElementById('myDiv');
 
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

＆＃13;

#myDiv{
  display: none;
}

＆＃13;

<button type="button" class="btn btn-default" onclick="showDiv()">Show div</button>

<div id="myDiv" style="display:none;">
test
test
test
test 
test
test 
</div>

＆＃13;

如果元素的显示被继承或由CSS规则指定，请使用getComputedStyle计算样式

＆＃13;

function showDiv() {
        var x = document.getElementById('myDiv');
   
      
        if (getComputedStyle(x, null).display === 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
        }
    }

＆＃13;

#myDiv{
      display: none;
    }

＆＃13;

<button type="button" class="btn btn-default" onclick="showDiv()">Show div</button>

    <div id="myDiv">
    test
    test
    test
    test 
    test
    test 
    </div>

＆＃13;

Answer 3

因为div没有显示风格。您可以手动添加它：

＆＃13;

function showDiv() {
    var x = document.getElementById('myDiv');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

＆＃13;

#myDiv{
display: none;
}

＆＃13;

<button type="button" class="btn btn-default" onclick="showDiv()">Show div</button>

<div id="myDiv" style='display:none'>
test
test
test
test 
test
test 
</div>

＆＃13;

Answer 4

您的代码存在的问题是x.style.display与您的元素内联的display属性相对应。它会忽略您的CSS选择器，这意味着第一次运行函数时x.style.display === 'none'为false。

内联display:none可以解决您的问题：

<div id="myDiv">...</div>      → → →      <div id="myDiv" style="display:none;">...</div>

但是，这不是推荐的方法。获得所需结果的更好方法是切换课程：

＆＃13;

document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById("myDiv").classList.toggle('hidden');
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<button id="myButton" type="button" class="btn btn-default">Show div</button>
<div id="myDiv" class="hidden">test test test test test test</div>

＆＃13;

Answer 5

设置CSS样式不会渗透到x.style.display所以当您第一次点击x.style.display实际上等于""时，它会点击您的其他块并将style.display设置为none，第二次，它击中条件的第一个分支并显示你的div。

使用computedStyle来获取实际样式，或者使用类会更容易。

JS：

function show () { var x = document.querySelector('#myDiv') x.classList.toggle('show') }

CSS：

.show { display: 'block'; }

所有现代浏览器都支持

Classlist，但是一些非常旧的浏览器会遇到困难，尽管存在良好的polyfill。

按钮单击仅在第二次单击时起作用

5 个答案: