为什么 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，但它不起作用...

错误：未捕获的类型错误：无法读取 undefined(...) 的属性“getElementsByClassName”

所以我的问题是当我想定位像 div 类这样的元素时如何开始工作？

我的目标是在选项页面面板中实现管理员用户可以从 textarea 更改/注入新的 css 规则或输入某些元素的能力。还有 div class social-container-icons 等元素。

这也是注入新 css 规则的好方法吗？

谢谢

Answer 1

1. 更好地使用addEventListener().First 声明DN.then 通过this.value调用DN的值。因为它的功能相同 在元素中。

2. 然后像 document.getElementsByClassName("options-parameters-input")[0] 一样抓住ClassName 结束 与[0].Class 与多个元素匹配 .so 标识为 [0].匹配第一个

3. fontSize 的 Dom 你应该用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;