js操作css样式

最新推荐文章于 2024-05-24 10:41:30 发布

丑小鸭变黑天鹅

最新推荐文章于 2024-05-24 10:41:30 发布

阅读量226

点赞数

分类专栏： javascript日常总结文章标签： javascript

本文链接：https://blog.csdn.net/qq_41880073/article/details/115693289

版权

javascript日常总结专栏收录该内容

35 篇文章 0 订阅

订阅专栏

js操作css样式

自己总结了一下，大概也就这么几种

1、setAttribute

使用这种方式需要提前写好一个样式，当点击或者其他事件发生时，利用这个属性，将class换为另一个样式，就可以发生改变了

2、setProperty

使用这个属性，用来改变原来已有样式中的某一属性。

3、removeProperty

使用这个属性，用来移除原来样式的一个属性。通过遍历styleSheets数组并选择cssRule，可以选择元素的样式。然后可以使用要删除的属性指定removeProperty方法。

通过一个实例去看看怎么用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.one {
				color: green;
				font-size: 20px;
			}
			.two {
				color: red;
				font-size: 30px;
			}
			.elem {
				color: green;
				font-size: 20px;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<p id="green" class="one">我是绿色的，字体大小为20px,点击之后，我会变为红色，字体为30px</p>
		<div class="elem">你好啊，童鞋</div>
		<br>
		<button id="button1" type="button">改变样式</button>
		<button id="button2" type="button">修改样式的某一属性</button>
		<button id="button3" type="button">删除样式的某一属性</button>
	</body>
	<script type="text/javascript">
		var button = document.getElementById('button1');
		button.onclick = function(){
			var green = document.getElementById('green');
			green.setAttribute('class','two');				
		}
		
		var btn2 = document.getElementById('button2');
		btn2.onclick = function(){
			var element = document.querySelector('.elem');
			element.style.setProperty('text-decoration','none');
		}
		
		var btn3 = document.getElementById('button3');
		btn3.onclick = function(){
			var element = document.styleSheets[0].cssRules[1].style; 
            element.removeProperty('color'); 
		}
	</script>
</html>

初始页面
在这里插入图片描述
点击第一个按钮

点击第二个按钮

点击第三个按钮

丑小鸭变黑天鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作css样式

js操作css样式自己总结了一下，大概也就这么几种1、setAttribute使用这种方式需要提前写好一个样式，当点击或者其他事件发生时，利用这个属性，将class换为另一个样式，就可以发生改变了2、setProperty使用这个属性，用来改变原来已有样式中的某一属性。3、removeProperty使用这个属性，用来移除原来样式的一个属性。通过遍历styleSheets数组并选择cssRule，可以选择元素的样式。然后可以使用要删除的属性指定removeProperty方法。通过一个实例去
复制链接

扫一扫