document.getElementById和document.getElementsByClassName之间的区别 [英] Difference between document.getElementById and document.getElementsByClassName

问题描述

特别是为什么document.getElementsById在这里工作

 < div id =move> add padding< / DIV> 
 
< button type =buttononclick =movefun（）> pad< / button> 
 
< script> 
函数movefun（）{
 document.getElementById（move）。style.paddingLeft =50px; 
} 
< / script> 
  

但document.getElementsByClassName不起作用

 < div class =move> add padding< / div> 
 
< button type =buttononclick =movefun（）>设置左填充< / button> 
 
< script> 
函数movefun（）{
 document.getElementsByClassName（move）。style.paddingLeft =50px; 
} 
< / script> 
  

我忽略了常见的东西，例如html和body标签以减少代码长度。

解决方案

由于 getElementsByClassName方法的 返回一个基于阵列所有具有所有给定类名称的子元素的对象。

如果您希望通过class

DEMO 1 - > http://jsfiddle.net/ 1r0u5d3o / 2 /

document.getElementsByClassName（ 移动）[0] .style.paddingLeft = 50像素;

或者如果您想要将其添加到类的所有元素中，请使用循环

'p> DEMO 2 - > http://jsfiddle.net/1r0u5d3o/1/

 函数movefun（）{
 var elements = document.getElementsByClassName（move）; 
 for（var i = 0; i< elements.length; i ++）{
 elements [i] .style.paddingLeft =50px; 
} 
} 
  

In particular why does document.getElementsById work here

<div id="move">add padding</div>

<button type="button" onclick="movefun()">pad</button>

<script>
function movefun() {
    document.getElementById("move").style.paddingLeft = "50px";
}
</script>

but document.getElementsByClassName does not work

<div class="move">add padding</div>

<button type="button" onclick="movefun()">Set left padding</button>

<script>
    function movefun() {
        document.getElementsByClassName("move").style.paddingLeft = "50px";
    }
</script>

I have left out the common things like the html and body tag to cut down on code length.

解决方案

Because getElementsByClassName returns an array-like object of all child elements which have all of the given class names.

Use this instead if you want to do it by class

DEMO 1 -> http://jsfiddle.net/1r0u5d3o/2/

document.getElementsByClassName("move")[0].style.paddingLeft = "50px";

Or if you want to do it to all the elements of the class, use a loop

DEMO 2 -> http://jsfiddle.net/1r0u5d3o/1/

function movefun() {
    var elements = document.getElementsByClassName("move");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.paddingLeft = "50px";
    }
}

这篇关于document.getElementById和document.getElementsByClassName之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！