文档章节

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引用类型Object常见用法实例分析

1、JavaScript数据类型 (1)基本类型 5种基本类型:Undefined、Null、Boolean、Number、String (2)引用类型 5种引用类型:Object、Array、Date、RepExp、Function (3)基本类型与引用类型的异同...

peakedness丶
11/21
0
0
JavaScript访问对象的属性和方法

对象的属性和方法统称为对象的成员。 访问对象的属性 在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性。 本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,htm...

前端攻城小牛
10/19
0
0
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

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

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

MiniBu
2012/10/11
0
6

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu16.04下安装docker

[TOC] 本文开发环境为Ubuntu 16.04 LTS 64位系统,通过apt的docker官方源安装最新的Docker CE(Community Edition),即Docker社区版,是开发人员和小型团队的理想选择。 1. 开始安装 1.1 由于...

豫华商
今天
8
0
使用XShell工具密钥认证登录Linux系统

如果你是一名Linux运维,那么Linux服务器的系统安全问题,可能是你要考虑的,而系统登录方式有两种,密码和密钥。哪一种更加安全呢? 无疑是后者! 这里我为大家分享用Xshell利器使用密钥的方...

dragon_tech
今天
4
0
day178-2018-12-15-英语流利阅读-待学习

“真蛛奶茶”了解一下?蜘蛛也会产奶了 Lala 2018-12-15 1.今日导读 “蛋白质含量是牛奶的 4 倍,并有着更低的脂肪和含糖量”,听起来诱人又美味的并不是羊奶或豆奶,而是你可能打死都想不到...

飞鱼说编程
今天
11
0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents

场景重现 npm install --verbose 安装依赖的时,出现如下警告 强迫症患者表示不能接受 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN......

taadis
今天
2
0
OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
440
6

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部