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

秒速五厘米 2022-07-24 11:15 219阅读 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);
    			}