Почему 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(…)

Так что мой вопрос заключается в том, чтобы работать, когда я хочу, чтобы целевой элемент, как класс сНа?

Моя цель состоит в том, чтобы создать возможность в панели параметров параметров, чтобы пользователь admin мог изменять/вводить новые правила css из textarea или ввода для определенных элементов. и есть такие элементы, как div-class social-container-icons и другие.

Также этот хороший способ ввести новые правила 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;