javascript - 为什么 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 类这样的元素时如何开始工作？

我的目标是在选项页面面板中提供管理员用户可以从文本区域更改/注入(inject)新的 css 规则或为某些元素输入的功能。还有像 div class social-container-icons 和其他元素。

这也是注入(inject)新 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>