第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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

JS基础(上)

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

694140
来自专栏dotnet & java

jQuery.prop , jQuery.attr ,jQuery.data

jquery.prop 获取匹配的元素中第一个元素特定的属性值,或者是设置多个元素的属性值。

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

使用DOM动态创建标签

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

22390
来自专栏技术博文

mysql中int长度的意义

疑问: mysql的字段,unsigned int(4), 和unsinged int(5), 能存储的数值范围是否相同。如果不同,分别是多大? 答: 无论是i...

34440
来自专栏前端知识分享

第75天:jQuery中DOM操作

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

8620
来自专栏大数据钻研

前端编码规范

基本原则 结构、样式、行为分离 统一缩进(建议 两个空格) 文件编码统一 不带BOM的UTF-8 一律使用小写字母 省略外链资源 URL 协议部分(FTP等其他...

38570
来自专栏Golang语言社区

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

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

351120
来自专栏电光石火

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

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

20190
来自专栏快乐八哥

前端知识小结

1. var a=null==undefined?1:"abc"; var b=typeof(a); var c=typeof(b); var d=typeof...

18990
来自专栏电光石火

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

用了转义字符把>和<替换掉,然后就没有问题了。

278100

扫码关注云+社区

领取腾讯云代金券