<style>
#p{
font-size:13px;
color:blue;
width:150px;
height:150px;
border:1px solid #000;
}
#c{
margin-left:20px;
margin-top:10px;
width:100px;
height:100px;
border:1px solid #000;
}
</style>
<script>
//获取元素引用
function change1() {
var p = document.getElementById("p");
var c = document.getElementById("c");
//alert("按确定键观察父节点改变效果!");
//更改父节点样式
with (p.style) {
//子节点的字体大小也被改变
fontSize = "18px";
//子节点的字体颜色也被改变
color = "black";
//默认背景为透明
background = "#eee";
}
}
function change2(){
//alert("按确定键观察子节点改变效果!");
//更改子节点样式
with(c.style){
//覆盖了父节点的背景色
background = "lightGrey";
}
}
</script>
<body>
<!-- 父节点 -->
<div id="p">
父节点
<!-- 子节点 -->
<div id="c">
子节点
</div>
</div>
<input type="button" value="按下此键观察父节点变化" onclick="change1()">
<input type="button" value="按下此键观察子节点变化" onclick="change2()">
</body>