js访问CSS的2种方法(点法和中括号法的区别),内含获取属性的兼容写法
博客专区 > SubinY 的博客 > 博客详情
js访问CSS的2种方法(点法和中括号法的区别),内含获取属性的兼容写法
SubinY 发表于1年前
js访问CSS的2种方法(点法和中括号法的区别),内含获取属性的兼容写法
  • 发表于 1年前
  • 阅读 18
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

1.1 js 常用 访问 CSS 属性 

我们访问得到css 属性,比较常用的有两种:

    1. 利用点语法

       box.style.width      box.style.top    

     点语法可以得到 width  属性  和 top属性  带有单位的。 100px

     但是这个语法有非常大的缺陷,  不变的。

     后面的width  和 top  没有办法传递参数的。

      var w = width;

      box.style.w     

   2. 利用 []  访问属性

      语法格式:  box.style[“width”]   

                元素.style[“属性”];

      console.log(box.style["left"]);

       最大的优点  :  可以给属性传递参数

 

 

 

1.2 得到css 样式  

我们想要获得css 的样式, box.style.left    box.style.backgorundColor

但是它只能得到   行内的样式。

但是我们工作最多用的是 内嵌式 或者 外链式 。

怎么办?

   核心: 我们怎么才能得到内嵌或者外链的样式呢?  

  1.   obj.currentStyle   ie  opera  常用

外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)

2 .window.getComputedStyle("元素", "伪类")     w3c

两个选项是必须的, 没有伪类 用 null 替代

3 兼容写法 :

    我们这个元素里面的属性很多, left  top  width  ===

 我们想要某个属性, 就应该 返回改属性,所有继续封装 返回当前样式的 函数。

1   var demo = document.getElementById("demo");

1     function getStyle(obj,attr) {  //  谁的      那个属性

2         if(obj.currentStyle)  // ie 等

3         {

4             return obj.currentStyle[attr];  

5         }

6         else

7         {

8             return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器

9         }

10     }

11     console.log(getStyle(demo,"width"));

共有 人打赏支持
粉丝 8
博文 84
码字总数 60618
×
SubinY
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: