Question

#va{
  color:yellow; 
 
}
#v{
  color:pink;
}

<div id = "va">   
  <div id ="v">my name is </div>
  <div>khan</div>      
</div>

我尝试过使用document.getelementbyid（“va”）。style.color =“yellow”;但是元素v的颜色没有改变我希望通过父级的id改变它的颜色我希望它通过javascript完成，因为它是我被捕获的情况的简单例子plz help

Answer 1

使用 jquery ，您有两种选择，使用.children()方法或使用.find()方法，请查看以下代码段：

$("#va").children().css("color", "red");
//$("#va").find("#v").css("color","blue");

#va {
  color: yellow;
}

#v {
  color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="va">
  <div id="v">
    my name is
  </div>
  <div>
    khan
  </div>
</div>

Answer 2

如果您想更改ID v的颜色，请使用getElementById("v")而不是getElementById("va")

document.getElementById("v").style.color = "yellow";

#va {
  color: yellow;
}

#v {
  color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="va">
  <div id="v">my name is </div>
  <div>khan</div>
</div>

Answer 3

您可以更改任何元素的class属性，并使用以下内容创建css：

document.getElementById("va").setAttribute("class", "yellow-class");

css会有类似的东西：

.yellow-class{
    color: yellow;
}

Answer 4

如果子节点的color属性设置为initial，则颜色样式仅影响子节点。

#va{
  color:yellow; 
}
#v{
  color:initial;
}

但是，这会从标签中删除默认的粉红色。有许多不同的方法可以解决这个问题，但最简单的方法是创建一个新的样式规则，只需使用js将一个类添加到#va来改变样式。

#va.yellow #v {
  color: yellow;
}

并使用此js。

document.getElementById("va").className += " yellow";

Answer 5

$("#va>#v").css("background-color","green")

#va{
  color:yellow; 
 
}
#v{
  color:pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "va">   asdasd
  <div id ="v">my name is </div>
  <div>khan</div>      
</div>

使用>直接子选择器。
选择器将选择id为va的元素的直接子（带有id v）并将颜色更改为红色

如何通过javascript从父div更改子div的属性？

5 个答案: