Question

document.getElementByClassName('xyz').style.display = 'none';

我无法隐藏课程内容。

Answer 1

document.getElementsByClassName返回一个像对象一样的数组。您可以使用以下脚本

document.getElementsByClassName('xyz')[0].style.display = 'none';

或者如果要隐藏所有.xyz元素

var x = document.getElementsByClassName("xyz");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = 'none';
}

Answer 2

如果你真的想以这种方式做事，那么当然首先你需要正确拼写getElementsByClassName;你在控制台看到这个错误，对吧？然后，您需要知道getElementsByClassName返回类似数组的东西;你在文档中看到了，对吧？所以你必须循环它，或者使用[0]或其他任何东西来获取第一个元素。

但总的来说，从这样的DOM中检索元素并直接设置它们的样式是不好的做法。相反，利用CSS，它将为您完成90％的工作。在这里，我使用一个控制行为的高级类，并设置：

<main id="main">
  <div class="xyz"></div>
<main>

然后将您的CSS编写为

main.hide-xyz .xyz { display: none; }

要隐藏xyz元素，那么您需要一个JS语句：

document.getElementById("main").classList.add("hide-xyz");

删除它：

document.getElementById("main").classList.remove("hide-xyz");

或切换它：

document.getElementById("main").classList.toggle("hide-xyz");

一旦你围绕这种风格，你会发现自己编写的多少的JavaScript需要各种DOM查找和循环以及样式设置。

Answer 3

＆＃13;

function show(){
var element = document.getElementsByClassName('elem');
console.log(element);
element[0].style.display = 'block';
}

＆＃13;

.elem {
  display: none;
}

＆＃13;

<div> visible
  <div class="elem">hidden
  </div>
  <button type="button" onclick="show()">click</button>
</div>

＆＃13;

getElementsByClassName返回一个数组，你不能直接设置它的样式。

Answer 4

您需要执行以下操作： let elem = document.getElementsByClassName('xyz')[0];

elem.style.display = 'none';

Answer 5

工作版

＆＃13;

hide = function(){
document.getElementsByClassName('xyz')[0].style.display="none";
}

＆＃13;

<input class="xyz" type="text"/>

<button onclick="hide();">Click to hide!</button>

＆＃13;

Answer 6

document.getElementsByClassName元素是找到元素的实时HTMLCollection。

＆＃13;

<div class="xyz">

test content
</div>
<button  type="button" onclick="document.getElementsByClassName('xyz')[0].style.display = 'none';">Hide Content </button>
<button  type="button" onclick="document.getElementsByClassName('xyz')[0].style.display = '';">Show Content </button>

＆＃13;

Answer 7

    $("#afficher_commentaire").change(function(){ 
        // alert("OK");
            if($(this).prop("checked") == true){
              var commentaire_date_fin_fourniture = document.getElementsByClassName("commentaire_date_fin_fourniture");
              for (var i = 0; i < commentaire_date_fin_fourniture.length; i++) { 
                  commentaire_date_fin_fourniture[i].style.display='block';
                  }
            }
            else if($(this).prop("checked") == false){
              var commentaire_date_fin_fourniture = document.getElementsByClassName("commentaire_date_fin_fourniture");
            for (var i = 0; i < commentaire_date_fin_fourniture.length; i++) { 
                commentaire_date_fin_fourniture[i].style.display='none';
                }
            }
     });

无法更改样式：使用getelementbyclassname显示

7 个答案: