15、关于元素CSS函数的封装,可用于获取和设置元素的CSS样式

最新推荐文章于 2022-12-22 19:53:46 发布

Bwz_Learning

最新推荐文章于 2022-12-22 19:53:46 发布

阅读量2k

点赞数 1

分类专栏： JavaScript_Bak 文章标签： JavaScript CSS 获取元素CSS属性的函数

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51471301

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、关于元素CSS函数的封装,可用于获取和设置元素的CSS样式

          <head>
		<meta charset="UTF-8">
		<title>CSS样式的获取和设置</title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
		<script type="text/javascript">
			//根据id获取元素
			function $(id) {
				return document.getElementById(id);
			}
			//获取样式
			function getStyle(obj, attr) {
				//哪个对象
				//哪个属性
				//IE
				if (obj.currentStyle) {
					return obj.currentStyle[attr];
				}
				//谷歌 火狐
				else {
					return getComputedStyle(obj, false)[attr];
				}
			}
			//获取或者设置CSS的属性
			//哪个对象
			//哪个属性
			//设置属性，新的数值
			function css(obj, attr, value) {
				//获取CSS的数值
				if (arguments.length == 2) {
					return getStyle(obj, attr);
				}
				//设置CSS的数值
				if (arguments.length == 3) {
					obj.style[attr] = value + "px";
				}
			}
			//调用CSS()方法，进行测试
			window.onload = function() {
				//alert(css($("div1"), "width"));
				css($("div1"), "width", 200);
			}
		</script>
	</head>

	<body>
		<div id="div1"></div>
	</body>

2、获取元素的CSS样式

                      //调用CSS()方法，进行测试
			window.onload = function() {
				alert(css($("div1"), "width"));
			}

3、设置元素的CSS样式

                      window.onload = function() {
				css($("div1"), "width", 200);
			}

Bwz_Learning

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录