js获取和修改css样式

最新推荐文章于 2024-02-12 02:11:43 发布

Liudef06

最新推荐文章于 2024-02-12 02:11:43 发布

阅读量377

点赞数 1

分类专栏： JavaScript学习记录 CSS 文章标签： js css

本文链接：https://blog.csdn.net/Liudef06/article/details/108940909

版权

JavaScript学习记录同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

一、操作css内联（只能操作内联样式）样式

格式：对象.style.样式名

例如：
var box1=document.getElementById(“box1”);
box1.style.backgroundColor=’#ccc’;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				height: 200px;
				width: 200px;
				background-color: #a8f;
			}
		</style>
		
		<script type="text/javascript">
		/**
		 * style只能读取和数字内联样式
		 */
			window.onload=function(){
				var btn1=document.getElementById("btn1");
				var box1=document.getElementById("box1");
				btn1.onclick=function(){
					box1.style.backgroundColor='#ccc';
					box1.style.color='orangered';
					box1.style.height="300px";
				}
				
			};
		</script>
	</head>
	
	<body>
		<div id="box1">
			box1
			<button id="btn1">改变背景颜色</button>
		</div>
	</body>
</html>

二、获取当前样式(无法设置，如果需要设值，可以使用style)
IE8中支持 currentStyle
火狐和谷歌等浏览器不支持，可以使用window.getComputedStyle
所以考虑兼容性，封装如下
使用格式：对象.style.样式名
例如：
var box1=document.getElementById(“box1”);
getStyle(box1).backgroundColor;

function getStyle(obj) {
	var style = null;
	if(window.getComputedStyle) {
		style = window.getComputedStyle(obj, null);
	}else{
	style = obj.currentStyle;
	}
return style;
}

Liudef06

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js获取和修改css样式

一、操作css内联（只能操作内联样式）样式格式：对象.style.样式名例如：var box1=document.getElementById(“box1”);box1.style.backgroundColor=’#ccc’;<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"
复制链接

扫一扫