爲什麼getElementsByClassName方法不工作，而工作的getElementById？

Question

這第一個代碼不工作

DN.onkeyup = DN.onkeypress = function(){ 
 
    var div = document.getElementById("DN").value 
 
    document.document.getElementsByClassName("options-parameters-input").style.fontSize = div; 
 
}

#one{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:#CCCCCC; 
 
    border:none; 
 
    margin:10px; 
 
    float:left; 
 
}

<div id="one"> 
 
    <div class="options-parameters-input"> 
 
    gfdgd 
 
    </div> 
 
</div> 
 
<br /><br /><br /><br /><br /><br /><br /> 
 
<table width="750" border="1" cellspacing="3" style="float:left;"> 
 
    <tr> 
 
    <td>Test</td> 
 
    <td><textarea id="DN"></textarea></td> 
 
    </tr> 
 
</table>

http://jsfiddle.net/gxTuG/85/

和這一個工程

DN.onkeyup = DN.onkeypress = function(){ 
 
    var div = document.getElementById("DN").value 
 
    document.getElementById("one").style.fontSize = div; 
 
}

#one{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:#CCCCCC; 
 
    border:none; 
 
    margin:10px; 
 
    float:left; 
 
}

<div id="one">gfdgd</div> 
 
<br /><br /><br /><br /><br /><br /><br /> 
 
<table width="750" border="1" cellspacing="3" style="float:left;"> 
 
    <tr> 
 
    <td>Test</td> 
 
    <td><textarea id="DN"></textarea></td> 
 
    </tr> 
 
</table>

http://jsfiddle.net/gxTuG/86/

在第一代碼

我想使用getElementsByClassName，它不工作...

Error: Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined(…)

所以我的問題是如何獲得工作時，我想針對類似div class元素？

我的目標是要在選項頁面板管理員用戶可以更改/ textarea的從輸入或某些元素注入新的CSS規則的能力。有像div類社交容器圖標和其他元素。

也就是注入新的CSS規則這個好辦法嗎？

謝謝

Answer 1

1. Better use with addEventListener() .First declare with DN .then call the value of the DN via this.value .Because Its same function in the element.

2. And Catch the ClassName like document.getElementsByClassName("options-parameters-input")[0] End with [0] .Class Match with multiple element .so identify with [0].Match the first one

3. Dom of fontSize you should mention with px

var DN = document.getElementById("DN"); 
 
DN.addEventListener("keyup",both); 
 

 
function both(){ 
 
document.getElementsByClassName("options-parameters-input")[0].style.fontSize = this.value+'px'; 
 
}

#one{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:#CCCCCC; 
 
    border:none; 
 
    margin:10px; 
 
    float:left; 
 
}

<div id="one"> 
 
<div class="options-parameters-input"> 
 
gfdgd 
 
</div> 
 
</div> 
 
<br /><br /><br /><br /><br /><br /><br /> 
 
<table width="750" border="1" cellspacing="3" style="float:left;"> 
 
    <tr> 
 
    <td>Test</td> 
 
    <td><textarea id="DN"></textarea></td> 
 
    </tr> 
 
</table>

Answer 2

getElementsByClassName方法返回對象的數組即使你有你的HTML只有一個。所以你沒有使用getElementsByClassName("options-parameters-input")[0]或任何索引可能。

Answer 3

document.getElementsByClassName總是返回屬於這一類元素的迭代。如果你想操縱某個對象，你需要提供該元素的索引。 方法被稱爲getElement__s__ByClassName。記住這一點。

例如： HTML：

<div class="my-class>1st div</div> 
<div class="my-class>2st div</div> 

JS：

let myDivs = document.getElementsByClassName("my-class"); 
myDivs[0].style.fontSize = div;