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但它不起作用...

错误：未捕获的TypeError：无法读取未定义的属性'getElementsByClassName'（...）

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

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

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

谢谢

Answer 1

getElementsByClassName返回对象数组，即使HTML中只有一个对象也是如此。所以你不能使用getElementsByClassName("options-parameters-input")[0]或索引。

Answer 2

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;

Answer 3

更好地使用addEventListener()。首先使用DN。然后再声明   通过this.value调用DN的值。因为它的功能相同   在元素中。



并抓住ClassName document.getElementsByClassName("options-parameters-input")[0]结束       与[0]。类匹配多个元素.so标识       [0]。匹配第一个


您应该fontSize
提及px的Dom

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

当getElementById有效时，为什么getElementsByClassName不起作用？

3 个答案: