关于js中style,currentStyle和getComputedStyle几个注意的地方

（1）用js的style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。针对css样式里background-color;margin-left之类的短杠相接的属性名称，在使用style属性获取设置样式的时候名称要改为驼峰式，如ele.style.backgroundColor。

（2）currentStyle可以弥补style的不足（可获取内联样式，内部样式和外部样式），但是只适用于IE。

（3）getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。

　　注意：

　　① currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。

　　② 如果要设置相应值，应使用style。

补充：

内联方式：样式定义在单个的HTML元素中 ，如<p style="font-size:16px;">测试例子</p>

内部样式表：样式定义在HTML页的头元素中

外部样式表：将样式定义在一个外部的CSS文件中（.css文件），由HTML页面引用样式表文件

保证兼容的做法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <title>js中获取css样式属性值</title>

  <style type="text/css">

  #div1{

    width:200px;

    height:200px;

    background:#ddd;

  }

  </style>

</head>

<body>

  <div id="div1" style="width:100px;background-color:green;"></div>

</body>

<script type="text/javascript">

window.onload=function(){

   var oDiv=document.getElementById('div1');

   //使用style属性只能获取到内联样式

   console.log(oDiv.style.backgroundColor);

   console.log(getStyle(oDiv,'background'));

}

function getStyle(obj, attr){

    //只适用于IE

    if(obj.currentStyle){

        return obj.currentStyle[attr];

    }else{

        //适用于FF,Chrome,Safa

        return getComputedStyle(obj,false)[attr];

    }

}

</script>

</html>

关于window.getComputedStyle(element, [pseudoElt])

参数解析:

（1）.element：必需，要获取样式值的元素对象。

（2）.pseudoElt：可选，表示指定节点的伪元素（:before、:after、:first-line、:first-letter等）。

获取样式属性升级版：

function getStyle(obj, attr , pseudoElt=false){

    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,pseudoElt)[attr]

}

源代码地址：https://github.com/zuobaiquan/javascript/blob/master/js中获取css样式属性值.html

js中获取css样式属性值的更多相关文章

  1. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  2. js中获取css样式的两种方式

    1. 对象.style.样式名  弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...

  3. js中获取css属性

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

  4. 获取css的属性值

    # -*- coding:utf-8 -*- """ 在元素上执行双击操作 """ from selenium import webdriv ...

  5. 原生js使用getComputedStyle方法获取CSS内部属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style ...

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

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

  7. js 设置 获取css样式

    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...

  8. MVC过滤器中获取实体类属性值

    本文地址:http://www.cnblogs.com/outtamyhead/p/3616913.html,转载请保留本地址! 最近在项目遇到了这个问题:获取Action行参中实体类的属性值,主要的 ...

  9. js中获取css的样式

    因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...

随机推荐

  1. 软件工程(FZU2015) 助教总结

    SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 本次构建之法-SE助教工作,和福州大学张老师协作,福大学生基本发挥出了一定水平,在此做个小结. 教师 张老师本身的SE教学 ...

  2. 【问题解决方案】之 hadoop 用jps命令后缺少namenode的问题

    用Xshell连接腾讯cloud里的虚拟机后,jps命令查无namenode导致过滤排序程序跑不起来,如图: 解决方案: Google之,说需要重启,格式化后再启动Hadoop.但鉴于本人不知道实现的 ...

  3. O(N) 求数组中最大子串和

    int MaxSubSum3(int *arr, int len) { int i; long long MaxSum = 0; long long CurSum = 0; for(int i = 0 ...

  4. 2 JAVA 项目名称前红色叹号如何解决

    1 Java 项目前出现红色叹号Eclipse找不到项目需要的JAR包,可以在这里面解决: ① 右键点击项目,选择[Build Path].[Configure Build Path...] ② 在这 ...

  5. RDD特性

  6. python之路--字典

    一. 字典 字典是以key:value的形式来保存数据的,用{}表示 字典的增删改查 字典的增加 dic = {"意大利": "李云龙", "美国&q ...

  7. SQL Server中的完全连接(full join)

    一.建库和建表 create database scort use scort create table emp ( empno int primary key, ename ), sal int, ...

  8. 学习 Spring (十五) Advisor

    Spring入门篇 学习笔记 advisor 就像一个小的自包含的方面,只有一个 advice 切面自身通过一个 bean 表示,并且必须实现某个 advice 接口,同时 advisor 也可以很好 ...

  9. Nginx 网络事件

    L27-29 应用层(如浏览器等一系列组成的发送get请求) 传输层 系统内核打开一个端口将客户端IP及端口和服务端IP及端口记录下来一并传输到网络层 网络层 打包后到链路层 再到客户端路由器至广域网

  10. linux 目录分类与文件操作

    / 虚拟根目录 一般不会在这里存储文件 /bin 二进制目录,存放需要GNU用户级的工具 /boot 启动目录,存放启动文件 /dev 设备目录,linux在这里创建设备节点 /etc 系统配置文件目 ...