style和className

最新推荐文章于 2021-09-30 08:57:36 发布

byd yes

最新推荐文章于 2021-09-30 08:57:36 发布

阅读量4.2k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/dai_xiangjun/article/details/50782422

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

元素.style.属性 = xxx,是修改行间样式，之后再修改className就会没有效果.

先变红后变绿色就没有问题，但是先变绿色再变红色就会出现问题，style的属性比className的优先级高。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<style>
	#div1 {width:200px; height:200px; border:1px solid black;}
	.box {background:red;}
</style>
<script>
	function toRed()
	{
		var oDiv = document.getElementById('div1');
		//oDiv.style.background="red"
		oDiv.className = 'box';
	}
	function toGreen()
	{
		var oDiv = document.getElementById('div1');
		oDiv.style.background = 'green';
	}
</script> 
<body>
<input type="button" value="变红" οnclick="toRed()"/>
<input type="button" value="变绿" οnclick="toGreen()"/>
<div id="div1">
	
</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

byd yes

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
style和className

元素.style.属性 = xxx,是修改行间样式，之后再修改className就会没有效果.先变红后变绿色就没有问题，但是先变绿色再变红色就会出现问题，style的属性比className的优先级高。Untitled Document #div1 {width:200px; height:200px; border:1px solid black;} .box {back
复制链接

扫一扫