第60天:js常用访问CSS属性的方法-阿里云开发者社区

开发者社区> 开发与运维> 正文

第60天:js常用访问CSS属性的方法

简介: 一、 js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种:     1. 利用点语法        box.style.width      box.style.top          点语法可以得到 width  属性  和 top属性  带有单位的。

一、 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"]);

       

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

二、  得到css 样式  

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

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

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

怎么办?

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

  1、 obj.currentStyle   ie  opera  常用

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

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

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

   3 、兼容写法 :

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

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

 1 1    var demo = document.getElementById("demo");
 2 2      function getStyle(obj,attr) {  //  谁的      那个属性
 3 3          if(obj.currentStyle)  // ie 等
 4 4          {
 5 5              return obj.currentStyle[attr];  
 6 6          }
 7 7          else
 8 8          {
 9 9              return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
10 10          }
11 11      }
12 12      console.log(getStyle(demo,"width"));

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章