JS操作元素样式

最新推荐文章于 2024-03-17 21:57:30 发布

前程韶光

最新推荐文章于 2024-03-17 21:57:30 发布

阅读量4.6k

点赞数 3

分类专栏： JS 文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_51235620/article/details/120914119

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通过js修改元素样式：

语法：元素.style.样式名=样式值；

如果css样式名中含有-，这种名称在js中是不合法的，比如：background-color需要将这种样式名修改为驼峰命名法：去除-，-后面第一个单词首字母大写，该属性名要改为backgroundColor。
通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过js修改的样式往往会立即执行。
但是：如果在样式中添加了！important,此时改样式具有最高的优先级，即使通过js也无法覆盖改样式，此时js修改的样式会失效。
另外,由于该方法读取的是元素的内联样式，如果元素只有外部样式而没有内联样式，读取到的结果为空字符串。
通过该方法设置样式值时，样式值改为字符串，比如：“100px”;

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box1{
			width: 200px;
			height:200px;
			background-color: red;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			/*
			点击按钮修改box1大小
			*/
		   var box1=document.getElementById("box1");
		   var btn01=document.getElementById("btn01");
		   btn01.onclick=function(){
			 //修改box1的宽度
		   box1.style.width="300px";
		   box1.style.height="300px";
		   box1.style.backgroundColor="yellow";
		   };
		   var btn02=document.getElementById("btn02");
		   btn02.onclick=function(){
			 console.log(typeof box1.style.width);  
			 //通过style属性读取的都是内联样式，它无法读取样式表中的样式，如果直接点击btn02输出为空串
		   };
		};
	</script>
</head>
<body>
	<button type="button" id="btn01">btn01</button>
	<button id="btn02">btn02</button>
	<div id="box1"></div>
</body>
</html>

获取元素当前显示的样式

语法：元素.currentStyle.样式名

该属性只有IE支持，其它浏览器均不支持
可以用来读取当前元素正在显示的样式
当元素的某些属性是默认值时，会直接使用其默认值，比如width，height，会输出auto，而不会输出具体的值
该方法只能读取样式值而不能修改样式值

使用getComputedStyle()方法获取元素当前的样式

该方法是window的方法，可以直接使用
两个参数：1.要获取样式的元素，2.可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
当元素的某些属性是默认值时，不会直接使用其默认值，比如width，height的默认值auto，该方法会返回元素属性具体的值
该方法不支持IE8及以下的浏览器
该方法同样只能读取样式值而不能修改样式值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width:100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//点击btn01,读取.box1样式
				var box1=document.getElementById("box1");
				var btn01=document.getElementById("btn01");
				btn01.onclick=function(){
					//alert(box1.style.width);//输出为空
				   var obj=getComputedStyle(box1,null);
				   alert(getstyle(box1,"width"));
				};
				/*定义函数，获取指定元素的当前样式
				参数：	obj:要获取样式的元素
						name:要获取的样式名*/
						function getstyle(obj,name){
							if(obj.currentStyle)
								return	obj.curentstyle[name];
							else
								return getComputedStyle(obj,null)[name];
						};
			};
		</script>
	</head>
	<body>
		<button id="btn01">btn01</button>
		<br>
		<br>
		<div id="box1" style="background-color: red;"></div>
	</body>
</html>

前程韶光

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS操作元素样式

通过js修改元素样式：语法：元素.style.样式名=样式值；如果css样式名中含有-，这种名称在js中是不合法的，比如：background-color需要将这种样式名修改为驼峰命名法：去除-，-后面第一个单词首字母大写，该属性名要改为backgroundColor。通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过js修改的样式往往会立即执行。但是：如果在样式中添加了！important,此时改样式具有最高的优先级，即使通过js也无法覆盖改样式，此时js修
复制链接

扫一扫