JS JS+CSS基本样式控制_js css 控制部分字体样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_47186832/article/details/109711578

<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>