Question

这是我的HTML代码：

<div class='row' id='row_1'>  
  <span></span><div style='display: inline-block;'></div>
  <span></span><div style='display: inline-block;'></div> 
  <span></span><div style='display: inline-block;'></div>   
</div>

我想仅更改<div>标记下的<span>标记或id='row_1'标记，如果我使用document.getElementById("row_1")，请更改document.getElementById("row_1").style.backgroundColor = color_code;，如下所示：

row_1

它会更改<div> id下的eveything的背景颜色。但我想更改特定标记的css属性，如<span>或strSim <- function(v1, v2) { if(length(v1) == length(v2)) 1 - (adist(v1, v2) / pmax(nchar(v1), nchar(v2))) else stop("vector lengths not equal")}。我怎么能这样做？

Answer 1

我希望这可以帮助你...

＆＃13;

var nodes = document.getElementById('row_1').getElementsByTagName("span");
for(var i=0; i<nodes.length; i++) {
    nodes[i].style.background = 'red';
}

＆＃13;

<div class='row' id='row_1'>  
  <span>1</span><div style='display: inline-block;'></div>
  <span>2</span><div style='display: inline-block;'></div> 
  <span>3</span><div style='display: inline-block;'></div>   
</div>

＆＃13;

Answer 2

你可以使用简单css而不是javascript

来做到这一点

#row_1 > span {
   background-color: red;
}

Answer 3

你可以这样做：

＆＃13;

var your_div = document.getElementById('row_1');
var childNode = your_div.childNodes[1];
childNode.style.background = 'red';

＆＃13;

<div class='row' id='row_1'>  
  <span>hello</span><div style='display: inline-block;'></div>
  <span>hi</span><div style='display: inline-block;'></div> 
  <span>thank you</span><div style='display: inline-block;'></div>   
</div>

＆＃13;

希望它有所帮助。：）

Javascript：更改id下某些特定元素的样式

3 个答案: