原文参考http://blog.csdn.net/lzding/article/details/46317777

1.写在dom上的属性,内联样式
<div id="box" style="background-color:#ccc;margin-top:100px;"></div>
var oBox = document.getElementById('box')
console.log(oBox.style.width)

1)对于复合属性(如background),假设行间设置了样式:background-color:#333,不能通过 element.style.background 来获取(见上面例子)
2)css属性使用驼峰法,如 backgroundColor、marginTop等。

2.写在css中的属性,非内联样式(chrome)
var oBox = document.getElementById('box');
var a = getComputedStyle(oBox, null)['width']; // 100px

1)对于复合属性:使用 getPropertyValue 获取属性值时,不能使用驼峰写法,如:例子中的 getpropertyValue('backgroundColor') 无法正确获得值,而必须写成 background-color
2)另外,以下写法也正确:getComputedStyle(oBox, null)['backgroundColor']、getComputedStyle(oBox, null)['background-color'], 以及 getComputedStyle(oBox, null).backgroundColor 等

js原生获取css属性的更多相关文章

  1. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  2. 为什么我获取不到这个css样式?js原生获取css样式总结

    还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...

  3. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  4. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  5. 自定义属性,innerHTML,outerHTML,dom节点的获取,className,tagName,更改或者是获取css属性

    01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...

  6. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  7. JavaScript如何获取css属性

    原文:JavaScript如何获取css属性 在web开发中,很多时候我们需要用JavaScript对网页的样式进行修改,接下来,我们就来看一下我们该如何访问css属性,针对不同情况及案例来进行分析. ...

  8. js原生获取className&多选一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

随机推荐

  1. oracle nvl()函数

    oracle的nvl()函数作用是当第一个值不为null时,返回第一个值,否则返回第二个值. 当第一个值为一个运算表达式时,那么第二个的值被限定为只能是NUMBER类型或者能隐式转换为NUMBER类型 ...

  2. 洛谷 P4234 最小差值生成树(LCT)

    题面 luogu 题解 LCT 动态树Link-cut tree(LCT)总结 考虑先按边权排序,从小到大加边 如果构成一颗树了,就更新答案 当加入一条边,会形成环. 贪心地想,我们要最大边权-最小边 ...

  3. java的值传递

    java中都是值传递 如果参数是引用类型的,实际上是把引用地址复制了一份传递 例如 User user = new User(); user存放在栈中,里面存放着内存地址,new User()会在堆中 ...

  4. Oracle DMP

    通过DMP对Oracle数据库进行导入导出 打开“开始”--->输入cmd,打开cmd命令窗口,输入以下命令即可 1导出 (1)将数据库ORACLE完全导出,用户名system密码manager ...

  5. docker升级

    使用系统自带的docker源安装docker,安装的版本都是偏低的,因此需要进行版本升级 升级步骤如下: 1. 查找现主机上关于docker的已安装包, 若列出为空,跳过第2步 rpm -qa|gre ...

  6. IOS Intro - Write file

    #import <sys/xattr.h> + (NSString *)getFullFilePathInDocuments:(NSString *)subFilePath fileNam ...

  7. Javascript面向对象编程(转)

    http://blog.csdn.net/lmj623565791/article/details/29210679 其实,从这个面向对象编程的例子来看,思路还是很清晰的. 第一步: 构造函数,用于初 ...

  8. JAVA学习7:在Maven仓库中添加Oracle JDBC驱动

    由于Oracle授权问题,Maven3不提供Oracle JDBC driver,为了在Maven项目中应用Oracle JDBC driver,必须手动添加到本地仓库. 一.首先要得到Oracle ...

  9. condition实现原理

    condition是对线程进行控制管理的接口,具体实现是AQS的一个内部类ConditionObject,主要功能是控制线程的启/停(这么说并不严格,还要有锁的竞争排队). condition主要方法 ...

  10. MySql的存储引擎介绍

    下面主要介绍InnoDB.MyISAM和MEMEORY三种存储引擎. InnoDB存储引擎 InnoDB遵循CNU通用公开许可(GPL)发行.InnoDB已经被一些重量级互联网公司所采用,如雅虎.Sl ...