javascript css函数一设置/读取对象的属性（Style对象与CurrentStyle对象、getComputedStyle）及其小案例

矫情吗；* 2021-11-16 15:54 209阅读 0赞

## 1、Style对象 ##

style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式，即元素标签中style属性的值。

例子：

## 2、currentStyle对象 ##

返回所有样式声明（包括内部、外部、内联）按css层叠规则作用于元素的最终样式。

Element.currentStyle 是一个与 window.getComputedStyle方法功能相同的属性。这个属性实现在旧版本的IE浏览器中.

只有IE和Opera支持使用CurrentStyle获取的元素计算后的样式。getComputeStyle()方法可以获取当前元素所使用的css属性值。

例如：

var oBox = document.getElementById(“box”);  
oBox.currentStyle\[“width”\]；  
即  
ele.currentStyle\[“attr”\] 或者  
ele.currentStyle.attr;  
  
  
var div=window.getComputeStyle(“div”,null).color;//第一个参数为目标元素，第二个参数为伪类（必需，没有伪类设为null）

与style对象的区别：

getComputeStyle()是只读，只能获取不能设置，style能读能设；
        
        对于一个没有设定任何样式的元素，getComputedStyle()返回对象中的length属性值，而style对象中length是0。
        
        不同的浏览器对currentStyle对象支持有差异，需要兼容处理。

优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。

注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。

obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
    	 
    	 或者
    	 
    	if (obj.currentStyle) { 
    		return obj.currentStyle[attr];
    	} else { 
    			return getComputedStyle(obj, null)[attr]
    			}

例子  
![在这里插入图片描述][20190728234615856.PNG]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70][] ![20190728234505860.PNG][]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>css函数——设置/读取对象的属性</title>
    		<style>
    			div{ width:400px;height:200px;background:#fef4eb;border:1px solid #f60;margin:0 auto;}
    input{ border:0;color:#fff;cursor:pointer;font-weight:700;background:#f60;padding:2px 4px;margin:10px 0 0 10px;}
    </style>
    		<script type="text/javascript">
    			function css(obj, attr, value) { 
    				switch (arguments.length) { 
    					case 2:
    						if (typeof arguments[1] == "object") {  //二个参数, 如果第二个参数是对象, 批量设置属性
    							for (var i in attr) obj.style[i] = attr[i]
    						} else {  //二个参数, 如果第二个参数是字符串, 读取属性值
    
    							//兼容性处理 
    							//return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
    							if (obj.currentStyle) { 
    								return obj.currentStyle[attr];
    							} else { 
    								return getComputedStyle(obj, null)[attr]
    							}
    
    						}
    						break;
    					case 3:
    						//三个参数, 单一设置属性
    						obj.style[attr] = value;
    						break;
    					default:
    						alert("参数错误！")
    				}
    			}
    			window.onload = function() { 
    				var oBox = document.getElementById("box");
    				var aInput = oBox.getElementsByTagName("input");
    
    				//第一个按钮点击事件
    				aInput[0].onclick = function() { 
    					//两个参数, 第二个参数为字符串, 读取属性值
    					alert("width: " + typeof(css(oBox, "width")) + "\nheight: " + css(oBox, "height") + "\nbackground-color: " + css(
    						oBox,
    						"backgroundColor"))
    				};
    				//第二个按钮点击事
    				aInput[1].onclick = function() { 
    					//两个参数, 第二个参数为对象, 属性批量设置
    					css(oBox, { 
    						width: "330px",
    						height: "100px",
    						borderColor: "#0084ff",
    						backgroundColor: "#eff8ff"
    					});
    					//三个参数, 属性单一设置
    					// for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#0084ff")
    				}
    				//第三个按钮点击事件
    				aInput[2].onclick = function() { 
    					//两个参数, 第二个参数为对象, 属性批量设置
    					css(oBox, { 
    						width: "400px",
    						height: "200px",
    						borderColor: "#f60",
    						backgroundColor: "#fef4eb"
    					});
    					//三个参数, 属性单一设置
    					//for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#f60")
    				}
    			};
    		</script>
    	</head>
    	<body>
    		<div id="box">
    			<input type="button" value="Get Style" />
    			<input type="button" value="Set Style" />
    			<input type="button" value="Default Style" />
    		</div>
    	</body>
    </html>

[20190728234615856.PNG]: /images/20211116/10ea283cec94427aaf9e575a32257088.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190728233958258.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[20190728234505860.PNG]: /images/20211116/7d939f31c93744438686ef4ee5283794.png