分配样式与点击事件不工作

Assigning styles with click event not working

本文关键字：事件 工作 样式 分配      更新时间：2023-09-26

这应该非常简单。我想把props属性分配给所有的li。

我从一个for循环开始遍历所有属性，嵌套另一个for循环遍历li的集合。这似乎不起作用，我不知道出了什么问题。我也得到错误:

Uncaught TypeError: Cannot read property 'style' of undefined

下面是我的代码和一个jsfiddle: http://jsfiddle.net/v3Pdr/2/

html 

<ul>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
</ul>
<button type="submit">Click</button>

JS 

(function(){
    var props = {
        color: "salmon",
        fontSize: "24px",
        textTransform: "uppercase"
    };
    for(var iterate in props) {
        for(var i = 0; i < document.querySelectorAll("ul li").length; i++) {
            document.querySelector("button").onclick = function() {
                document.querySelector("ul li").style[iterate] = props[iterate];    
                console.log(iterate);
            }
        }
    }
    console.log(document.querySelectorAll("ul li")); // has length of 20
}());

你把问题理解错了:

(function(){
  var props = {
    color: "salmon",
    fontSize: "24px",
    textTransform: "uppercase"
    };
  document.querySelector("button").onclick = function() {
    for(var iterate in props) {
        for(var i = 0; i < document.querySelectorAll("ul li").length; i++) {
            document.querySelectorAll("ul li")[i].style[iterate]=props[iterate];
            };    
        }
    }
    console.log(document.querySelectorAll("ul li"));
}());

看到jsfiddle.net/v3Pdr/3/。

相关文章：