文档章节

js访问CSS的2种方法(点法和中括号法的区别),内含获取属性的兼容写法

SubinY
 SubinY
发布于 2016/12/06 21:48
字数 375
阅读 23
收藏 0

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"));

© 著作权归作者所有

共有 人打赏支持
SubinY
粉丝 8
博文 87
码字总数 66143
作品 0
佛山
程序员
React拾遗:从10种现在流行的 CSS 解决方案谈谈我的最爱 (上)

Strong opinions are very useful to others. Those who were undecided or ambivalent can just adopt your stance. But those who disagree can solidify their stance by arguing against......

FateRiddle
07/05
0
0
JavaScript的浏览器兼容性问题小结。

JavaScript的浏览器兼容问题是前端开发中一直存在的一个问题,和css兼容性一样,我们在开发过程中必须了解一些基本的兼容性处理方法,下面从以下几个方面总结下js开发常碰到的问题:1、常用的...

MiniBu
2012/10/11
0
6
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0
ES6对对象的拓展(2018-05-08)

对象的传统表示法 let person = { "name":"张三", "say":function(){ alert("你好吗?"); } } ES6中的简洁写法 var name = "Zhangsan"; var age = 12; //传统的属性写法 var person = { "na......

a小磊_
05/10
0
0
JavaScript基础(六)面向对象

面向对象 对象创建方式: 1、调用系统函数创建对象 (创建对象的最简单方式就是创建一个 Object 的实例,然后再为它添加属性和方法。) 缺点:使用同一个接口创建很多对象,会产生大量的重复...

fengdaoting
05/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.4部署Zabbix4.0

环境搭建 在CenOS7.4里面部署Zabbix最好先搭建好环境,我这里使用的是PHP+MariaDB+httpd部署的。 部署PHP环境: yum install -y php php-php-fpm 修改 PHP 参数以安装 ZABBIX 的安装需求: ...

寰宇01
24分钟前
2
0
工厂模式

(从别人里copy的,方便自己查看) 意图:定义一个创建对象的接口,让其子类自己决定实例化哪一个工厂类,工厂模式使其创建过程延迟到子类进行。 主要解决:主要解决接口选择的问题。 何时使...

南桥北木
50分钟前
1
0
rabbitmq学习(一)

RabbitMQ是目前非常热门的一款消息中间件,具有高可靠、易拓展、高可用及丰富的功能 1.什么是消息中间件 消息是指在应用间传送的数据。包含文本字符串、JSON、内嵌对象 消息队列中间件(消息...

hensemlee
53分钟前
2
0
学习设计模式——原型模式

1. 认识原型模式 1. 定义:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象。 2. 结构: Prototype:声明一个克隆自身的接口,用来约束想要克隆自己的具体实现类,要求这些类...

江左煤郎
59分钟前
1
0
观察者模式

观察者模式的套路 有如下角色: 事件,比如修改,用户点击; 事件队列,触发事件之后,会把事件一个一个放入事件队列 监听器,采用某种方式(一般是轮询,或者io阻塞机制),来判断事件队列是否有新的未...

黄威
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部