currentStyle[通俗易懂]

用js的style属性可以获得html标签的样式，但是不能获取非行间样式。

解决方法：

在IE下可以用currentStyle;

在FF下用getComputedStyle;

然而，为了让其兼容，解决方法，封装成getStyle事件：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      #div2{width:500px;height:100px;background-color:green;}
   </style>
</head>
<body>
<div id="div2"></div>
</body>
</html>
<script>
最初：

if(oDiv2.currentStyle){
  
  
 //IE
 console.log(oDiv2.currentStyle.height);
}else{
  
  
 //    FF
 console.log(getComputedStyle(oDiv2,false).width);
}


   //封装一个兼容性的获取元素样式的函数
   //分析:哪个元素,哪个样式
 function getStyle(obj,attr){
  
  
      if(obj.currentStyle){
  
  
　　　　　　//IE
return obj.currentStyle[attr];
      }else{
  
  
　　　　　　//FF
return getComputedStyle(obj,false)[attr];
      }
   }
//用法
   window.onload = function(){
  
  
      var oDiv=document.getElementById("div2");
      console.log(getStyle(oDiv,"width"));
   }

//进一步封装 

//obj:获取谁的样式,attr:样式名称,value样式的值

function css(obj,attr,value){
  
  
   if(arguments.length==2){//获取
      return getStyle(obj,attr)
   }else if(arguments.length == 3){//设置
      obj.style[attr] =value;
   }
}

//用法：

//      oBtn.onclick = function () {
  
  
//        css(oDiv,"background","black");
//        css(oDiv,"border","3px solid yellow");
//        console.log(css(oDiv,"width"));
//     }


</script>

补充：
JavaScript中，函数本身的length属性和arguments.length到底有什么区别？
1,函数本身有length属性，表示参数的个数。
arguments.length也表示参数的个数。

2,函数对象的length属性是形式参数的个数；
arguments伪变量的length属性是某次调用的实际参数的个数。
　　例如：
　　　　function func(a,b,c){
   
   
　　　　　　console.log(arguments.length);//输出：3
　　　　}
　　　　　　console.log(func.length)//输出: 1
　　　　func(1);
以上是后来发现错的，2017-03-16更正了以后：

    　　function func(a,b,c){
   　　　　console.log("arguments:"+arguments.length); //输出 arguments:：1
　　　　}
　　　　console.log("length:"+func.length); //输出 length: 3
　　　　func(1);

3，函数本身也是对象，对象就有属性，函数有length属性，比如： function fn(x,y,z) {}中 fn.length=3,说明了函数的形参个数；而在函数体内，arguments.length表示传入函数的实参个数，比如：function fun(1,2) { console.log(arguments.length)} 中实参的个数为arguments.length=2

4，fn.length: 形参个数
arguments.length: 实参个数

//拓展：

//arguments  数组(所有的参数)  可变参(不定参)
function sum2() {
  
  
   var result = 0;
   var i = 0;
   for(i=0;i<arguments.length;i++){
  
  
      result += arguments[i];
   }
   console.log(result);//输出13

}
sum2(4,4,5);

　总结，除了可以用arguments去判断参数个数，还可以做不定参的运算。

转载于:https://www.cnblogs.com/wang715100018066/p/6000536.html

今天的文章currentStyle[通俗易懂]分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/71707.html

currentStyle[通俗易懂]

相关推荐

发表回复