DDR爱好者之家

JS之获取样式的简单实现方法(推荐)
站长资源 2024/11/28 佚名
2 1538
DDR爱好者之家 Design By 杰米

基本代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      color:yellow;
    }
  </style>
</head>
<body>
  <div style="width:100px;height:100px;background-color:red">This is div</div>
</body>
</html>

1.通过使用element.style属性来获取

<script>
  var div = document.getElementsByTagName("div")[0];
  console.log(div.style.color); //""
  console.log(div.style.backgroundColor); //red
</script>

element.style属性只能获取行内样式，不能获取<style>标签中的样式，也不能获取外部样式

由于element.style是元素的属性，我们可以对属性重新赋值来改写元素的显示。 

<script>
    var div = document.getElementsByTagName("div")[0];
    div.style['background-color'] = "green";
    console.log(div.style.backgroundColor); //green
  </script>

2.通过getComputedStyle和currentStyle来获取样式

getComputedStyle的使用环境是chrome/safari/firefox IE 9,10,11

<script>
  var div = document.getElementsByTagName("div")[0];
  var styleObj = window.getComputedStyle(div,null);
  console.log(styleObj.backgroundColor); //red
  console.log(styleObj.color); //yellow
</script>

currentStyle在IE里能得到完美支持，chrome不支持，ff不支持

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = div.currentStyle;
    console.log(styleObj.backgroundColor); //red
    console.log(styleObj.color); //yellow
  </script>

3.ele.style和getComputedStyle或者currentStyle的区别

3.1 ele.style是读写的，而getComputedStyle和currentStyle是只读的

3.2 ele.style只能得到行内style属性里面设置的CSS样式，而getComputedStyle和currentStyle还能得到其他的默认值

3.3 ele.style得到的是style属性里的样式，不一定是最终样式，而其他两个得到的是元素的最终CSS样式

4.获取样式兼容性写法

<script>
    //获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名
    function getStyle(obj,attr){
       //针对IE
       if(obj.currentStyle){
         return obj.currentStyle[attr];               //由于函数传过来的attr是字符串，所以得用[]来取值
       }else{
         //针对非IE
         return window.getComputedStyle(obj,false)[attr];
       }
    }
    /*
       获取或者设置css属性
    
    */
    function css(obj,attr,value){
       if(arguments.length == 2){
         return getStyle(obj,attr);
       }else{   
         obj.style[attr] = value;
       }
    }
  </script>

 5.window.getComputedStyle(ele[,pseudoElt]);

 第二个参数如果是null或者省略，则获取得到是ele的CSSStyleDeclaration对象

如果是一个伪类，则获取到的是伪类的CSSStyleDeclaration对象

<style>
div{
  width:200px;
  height:200px;
  background-color:#FC9;
  font-size:20px;
  text-align:center;  
}
div:after{
  content:"This is after";
  display:block;
  width:100px;
  height:100px;
  background-color:#F93;
  margin:0 auto;
  line-height:50px;
    
}
</style>

<body>
  <div id='myDiv'>
    This is div
  </div> 
  <input id='btn' type="button" value='getStyle'/> 
  <script>
    var btn = document.querySelector('#btn');
    btn.onclick = function(){
      var div = document.querySelector('#myDiv');
      var styleObj = window.getComputedStyle(div,'after');
      console.log(styleObj['width']);
    }
  </script>
</body>

 6.getPropertyValue获取CSSStyleDeclaration对象中的指定属性值

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = window.getComputedStyle(div,null);
    console.log(styleObj.getPropertyValue("background-color"));
</script>

getPropertyValue(propertyName);中的propertyName不能是驼峰式表示

obj.currentStyle['margin-left'] 有效

obj.currentStyle['marginLeft']  有效   

window.getComputedStyle(obj,null)['margin-left']  有效

window.getComputedStyle(obj,null)['marginLeft']  有效

window.getComputedStyle(obj,null).getPropertyValue('margin-left')  有效

window.getComputedStyle(obj,null).getPropertyValue('marginLeft')   无效

obj.currentStyle.width   有效

obj.currentStyle.background-color 无效

obj.currentStyle.backgroundColor  有效

window.getComputedStyle(obj,null).width  有效

window.getComputedStyle(obj,null).background-color  无效

window.getComputedStyle(obj,null).backgroundColor 有效

综上，就是带有"-"的属性不能直接点出来，所以有getPropertyValue方法来处理，但是可以用[]来取代getPropertyValue

7.defaultView

在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下，这是不需要的， 因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView,  那是在firefox3.6上访问子框架内的样式 (iframe)

以上这篇JS之获取样式的简单实现方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米