关于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. 获取css的属性值

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

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

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

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

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

  6. js 设置 获取css样式

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

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

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

  8. js中获取css的样式

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

  9. ajax获得后台传来的一个json值,在js中获得其中的属性值

    首先 ajax的dataType需要设置为json, 默认的text获取属性值在jquery3.2.1中尝试不成功 获得属性值的方式: 类似数组,键值对的方式 下面例子: 设置dataType为jso ...

随机推荐

  1. GJM:Unity导入百度地图SDK [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  2. Xcode中的Version和Build的区别

    Version( 应用程序发布版本号 ) Version对应的是CFBundleShortVersionString. Version 一般由产品部门确定,版本号是由分隔的整数组成的字符串,一般有2段 ...

  3. SQL NULL 值【摘自W3C】

    SQL NULL 值 本章讲解 IS NULL 和 IS NOT NULL 操作符. NULL 值是遗漏的未知数据.默认地,表的列可以存放 NULL 值. 如果表中的某个列是可选的,那么我们可以在不向 ...

  4. Redis系列(4)_持久化方式-RDB

    一.概念 在指定的时间间隔内将内存中的数据集快照写入磁盘(满足指定时间间隔和操作次数两个条件),也就是行话讲的Snapshot快照,它恢复时是将快照文件直接读到内存里 二.配置文件(redis.con ...

  5. Ps 之路 更改前景色

     用快速选中工具 选中要改变的图片,选中你喜欢的颜色,按Alt+Del

  6. 文件转换神器Pandoc使用

    最近记录笔记,改用Markdown格式.但有时需要分享下笔记,对于不懂markdown格式的同学来说阅读感觉不是那么友好.因此就一直在寻找一款文件转换的软件,之前因为用markdownpad来编写,可 ...

  7. OC高级编程——深入block,如何捕获变量,如何存储在堆上

    OC高级编程——深入block,如何捕获变量,如何存储在堆上   首先先看几道block相关的题目 这是一篇比较长的  博文 ,前部分是block的测试题目,中间是block的语法.特性,block讲 ...

  8. 简述tcp协议对http性能的影响及优化

    当网站服务器并发连接达到一定程度时,你可能需要考虑服务器系统中tcp协议设置对http服务器的影响. tcp相关延时主要包括: 1.tcp连接时建立握手: 2.tcp慢启动拥塞控制: 3.数据聚集的N ...

  9. c++ 求集合的交并补

    #include<iostream.h> #include<windows.h> #include<iomanip.h> #include<stdio.h&g ...

  10. Java学习笔记20---内部类之对成员内部类的补充说明(一)

    上篇文章--笔记19简要介绍了成员内部类.局部内部类和匿名内部类,下面对成员内部类再补充一些内容. 主要有以下6点: 1.成员内部类不可以有静态成员,成员变量为static final时除外 2.外部 ...