javascript初学总结_5

曾经终败给现在 2022-07-15 06:16 186阅读 0赞

<!DOCTYPE HTML>
    <html>
    <head>
    <title>css函数</title>
    <style type="text/css">
    #div1 {width:200px;height:200px;background:red;}
    </style>
    
    <script type="text/javascript">
    function getStyle(obj,arr)
    {
    	if(obj.currentStyle)
    	{
    		return obj.currentStyle[arr];//返回obj对象里arr属性的值
    	}
    	else
    	{
    		return getComputedStyle(obj,null)[arr];
    	}
    }
    
    function css(obj,arr,value)
    {
    	if(arguments.length==2)
    	{
    		return getStyle(obj,arr);//获取属性值
    	}
    	else if(arguments.length==3)
    	{
    		obj.style[arr]=value;//设置属性值
    	}
    }
    
    window.οnlοad=function()
    {
    	var oDiv=document.getElementById('div1');
    	var oBtn=document.getElementById('btn1');
    	oBtn.οnclick=function()
    	{
    		alert(css(oDiv,'backgroundColor'));
    	}
    }
    </script>
    </head>
    
    <body>
    <button id="btn1" type="button">提交</button>
    <div id="div1"></div>
    
    </body>
    </html>

收获：

1.实参的个数不必等于形参的个数

2.style对象可用于修改属性值和获取属性值，但在获取属性值时只返回通过style标签属性应用到元素的内嵌样式；

3.currentStyle对象代表了在全局样式表、内嵌样式表和HTML标签属性中指定的对象格式和样式，即会返回指定元素上所有的样式值，当其中的一个样式有多种，如color有red,green时，会返回最具资格的一个属性值，不可以改变属性值，且只有IE支持；

4.Window.getComputedStyle()方法得出所有在应用有效的样式和分解任何可能会包含值的基础计算后的元素的CSS属性值。getComputedStyle 返回的对象跟 element 调用 style 属性返回的对象是同一种类型，但getComputedStyle返回的对象是只读对象，不可修改其属性值；