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

一、 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>)样式表中的样式(ie和opera)

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

使用DOM动态创建标签

本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getEleme...

2099
来自专栏进击的君君的前端之路

jQuery动画与ajax

2173
来自专栏电光石火

mybatis在xml文件中处理大于号小于号的方法

第一种方法: 用了转义字符把>和<替换掉,然后就没有问题了。 SELECT * FROM test WHERE 1 = 1 AND start_da...

1919
来自专栏数据结构笔记

JavaScript中 appendChild追加子节点无效的解决办法

这其实是因为一个元素只能有一个父元素,上面这段代码试图将 btn添加到多个元素中。

952
来自专栏小壮和前端

es6之深入理解promise对象

880
来自专栏柠檬先生

Angularjs基础(十二)

ng-model-options       描述:规定如何更新模型             实例: 在失去焦点时绑定输入框的值scope 变量中。 ...

20610
来自专栏Golang语言社区

JS基础(上)

JS与DOM的关系 浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象 文档对象模型DOM(Document Obj...

54314
来自专栏Golang语言社区

厚土Go学习笔记 | 07. 基本类型

Go语言的基本类型有 bool string int int8 int16 int32 int64 uint uint8 uint16 uint32 uint6...

34512
来自专栏前端知识分享

第75天:jQuery中DOM操作

还有就是,我说的是name属性,上面例子中的 type属性,是可以用attr的。

762
来自专栏进击的君君的前端之路

DOM操作

1806

扫码关注云+社区