zoukankan      html  css  js  c++  java
  • 用原生JS获取非行间样式

    用currentStyle,getComputedStyle来获取非行间的CSS样式。同时用可变参arguments来获取和设置CSS样式。

    这篇是上一篇js用currentStyle和getComputedStyle获取css样式(非行间)的延伸版,注释的比较清楚。同时还加入了设置样式的css函数。希望对大家有帮助。

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    #div1{500px; height:200px; background:red;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS获取非行间样式,封装css函数设置css样式</title>
    <script type="text/javascript">
    function getStyle(obj,attr)  //获取非行间样式,传两个参数,obj是获取对象,attr是值
    {
    	if(obj.currentStyle)   //currentStyle针对IE浏览器获取非行间样式
    	{
    		return obj.currentStyle[attr];  //返回对象的值
    	}else
    	{
    		return getComputedStyle(obj, false)[attr];  //getComputedStyle针对非IE浏览器
    	};
    };
    function css(obj, attr, value)  //传三个参数 对象,样式,值。传参时不一定传3个参数,传2个参数时为获取样式,3个时是设置样式
    {
    	if(arguments.length==2)  //arguments参数数组,当参数数组长度为2时表示获取css样式
    	{
    		return getStyle(obj,attr);  //返回对象的非行间样式的值用上面的getStyle函数
    	}else
    	if(arguments.length==3)  //当传三个参数时为设置对象的某个值
    	{
    		obj.style[attr]=value;
    	}
    };
     
    window.onload=function()
    {
    	var oDiv=document.getElementById('div1');
    	var oBtn=document.getElementById('btn');
     
    	oBtn.onclick=function()
    	{
    		css(oBtn,'backgroundColor','green');  //传三个参数当点击按钮时把按钮的背景色变成绿色
    		alert(css(oDiv, 'width'));  //传两个参数时弹出div的颜色
    	};
    };
    </script>
    </head>
     
    <body>
    <input type="button" value="样式" id="btn" />
    <div id="div1"></div>
    </body>
    </html>

     

  • 相关阅读:
    Hdu 4221 Greedy?
    Hdu 2955 Robberies
    Hdu 3309 Roll The Cube
    Hdu 2602 Bone Collector
    Hdu 2844 Coins
    Hdu 2255奔小康赚大钱
    Hdu 2120 Ice_cream's world I
    Hdu 2159 FATE
    Hdu 2102 A计划
    Hdu 2098分拆素数和
  • 原文地址:https://www.cnblogs.com/webtall/p/2642026.html
Copyright © 2011-2022 走看看