0

问题

如何选择使用特定属性（背景颜色 #00FF00）标识的文本节点值？

由于我是 javascript 新手，我不确定如何执行第一步：

  1. 使用 js dom 选择 00FF00 的节点
  2. 用“”作为分隔符分割字符串
  3. 循环并用 += 添加每个 split[2]
  4. 将总和 (240+80+600) 写入 html

代码

<!DOCTYPE html>
<html>
<head>

<script>
window.onload = function() {
    var data  = document.getElementsByTagName('span');
    document.write(data);
};
</script>

</head>
<body>
<div class="box">
<span class="highlight">Dave collected 700 items.</span>
</div>
<div class="box">
<span class="highlight" style="background-color:#00FF00;">Bob collected 240 items.</span>
</div>
<div class="box">
<span class="highlight" style="background-color:#00FF00;">Bob collected 80 items.</span>
</div>
<div class="box">
<span class="highlight" style="background-color:#00FF00;">Bob collected 600 items.</span>
</div>
</body>
</html> 



var els = document.querySelectorAll('span.highlight');
var len = els.length;
//console.log(len); //returns 4
var total = 0;
for (var i=0; i < len; i++) {
    if (els[i].style.backgroundColor.toLowerCase() === 'rgb(0, 255, 0)') {
    var txt = els[i].innerHTML;

    //split txt into array
    split = txt.split(" ");
    total += parseInt(split[2]);
    }
}
console.log(total);
4

2 回答 2

2

除非您试图抓取另一个站点的内容并且无法控制 HTML 结构，否则我建议您向这些站点添加一个附加类或属性，以简化这些节点的选择。

但是，您可以这样做：

var els = document.querySelectorAll('span.highlight'),
    i = 0,
    len = els.length;

for (; i < len; i++) {
    if (els[i].style.backgroundColor.toLowerCase() === '#00ff00') {
        //code
    }
}
于 2013-08-13T15:22:28.773 回答
1

如前所述，最好使用类定义。但是如果你必须按颜色选择，下面的代码应该会为你做。

var data = document.getElementsByTagName('span');
var len = data.length;
for(var i = 0; i < len; ++i){
    var styles = data[i].getAttribute('style');
    if(styles.indexOf('background-color:#00FF00') != -1){
        //Do something
    }
}
于 2013-08-13T15:22:59.947 回答