Question

我试图创建一个可扩展的div。我想检索CSS显示属性并使用纯javascript更改它。在这样做时，我收到一条错误，上面写着＆＃34; Uncaught TypeError：无法执行＆＃39; getComputedStyle＆＃39; on＆＃39; Window＆＃39;：参数1的类型不是＆＃39;元素＆＃39;。＆＃34;

＆＃13;

var myFunction = function() {   

    var header = document.getElementsByClassName('collapse_header');

    var hiddenDiv = document.getElementsByClassName('collapse_body');
    var theCSSprop = window.getComputedStyle(hiddenDiv).getPropertyValue('display');
    for (var i = 0; i < hiddenDiv.length; i++) {      

        if (theCSSprop.style.display === "block" || theCSSprop.style.display === "") {
            clVal[i].style.display = "none";

        } else {
            theCSSprop.style.display = "block";
        }


        header[i].addEventListener('click', myFunction, false);

    }

}
document.addEventListener('DOMContentLoaded', myFunction, false);

＆＃13;

.collapse_wrapper {
    width:500px;
    padding:0;
    overflow:hidden;
    border:1px solid #636428;
    border-radius:18px;
    margin:auto;
    margin-top:50px;
    margin-left:50px;
    float:left;
}

.collapse_header {
    padding:50px;
    width:100%;
    background:#636428;
    font-size:34px;
    color:#fff;
    overflow:hidden;
}

.collapse_body {
    height:500px;
    background:#fff;
    font-size:90px;
    display:none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
    <section class="collapse_wrapper">
        <div class="collapse_header">
            Expandable Div 1
        </div>

        <div class="collapse_body">
            The body of div 1
        </div>
    </section>

    <section class="collapse_wrapper">
        <div class="collapse_header">
            Expandable Div 2
        </div>

        <div class="collapse_body">
            The body of div 2
        </div>
    </section>
</body>
</html>

＆＃13;

Answer 1

我有一个你想要实现的实例。如果您不使用库，那么以交叉浏览器方式获取计算属性背后会有点痛苦。所以，我认为在javascript中设置display:none可能更好。

这是我的代码

for (var i = document.getElementsByClassName('collapse_body').length - 1; i >= 0; i--) {
    document.getElementsByClassName('collapse_body')[i].style.display = "none";
};
var l = document.getElementsByClassName('collapse_header');
var toggle = function()
{
    cb = this.parentNode.getElementsByClassName('collapse_body')[0];
    cb.style.display = ((cb.style.display == "none") ? "block" : "none");

}
for (var i = l.length - 1; i >= 0; i--) {
    l[i].addEventListener('click', toggle, false);
};

基本上，您将所有display元素的collapse_body属性设置为none，然后附加到每个collapse_header事件，以切换其兄弟的显示属性{ {1}}。

Here is a working example

另请注意，collapse_body会返回一个元素数组，您可以像使用普通数组一样映射或选择元素。

使用javascript和getElementsByClassName检索显示属性

1 个答案: