鍍金池/ 問(wèn)答/HTML5  HTML/ 為什么不能通過(guò)getElementsByClassName 方式來(lái)改變?cè)械腸l

為什么不能通過(guò)getElementsByClassName 方式來(lái)改變?cè)械腸lassName？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .show{
            width: 100px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
    <script type="text/javascript">
        function rec(){
            var gg=document.getElementsByClassName("close");
            gg.className="show";
        }
    </script>
</head>
<body>


<div class="close">hello world</div>
<input type="button" name="" value="change" onclick="rec()">



</body>
</html>

為什么這樣沒(méi)效果？
要把class="close"改成id="close";通過(guò)var gg=document.getElementById("close");才有效？

回答
編輯回答
凝雅

getElementsByClassName() 方法返回所有指定類名的元素集合，注意結(jié)果是NodeList對(duì)象。
像你這個(gè)頁(yè)面中只有1個(gè)同名class可以通過(guò)gg[0].className="show";來(lái)實(shí)現(xiàn)效果

2018年3月10日 04:02
編輯回答
墨染殤

clipboard.png
該方法返回的是個(gè)類數(shù)組對(duì)象，并不是單個(gè)元素。
可以試試
gg[0].className = 'show'

2018年4月17日 02:15
編輯回答
故人嘆

getElementsByClassName() 方法返回的是一個(gè)數(shù)組，你存入變量后沒(méi)有選擇下標(biāo)，所以不會(huì)執(zhí)行。
而且使用 ele.setAttribute() 方法去修改dom屬性更為可靠一些。

2018年5月4日 18:29