关于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页面引用样式表文件

保证兼容的做法

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.   <title>js中获取css样式属性值</title>
  7.   <style type="text/css">
  8.   #div1{
  9.     width:200px;
  10.     height:200px;
  11.     background:#ddd;
  12.   }
  13.   </style>
  14. </head>
  15. <body>
  16.   <div id="div1" style="width:100px;background-color:green;"></div>
  17. </body>
  18. <script type="text/javascript">
  19. window.onload=function(){
  20.    var oDiv=document.getElementById('div1');
  21.    //使用style属性只能获取到内联样式
  22.    console.log(oDiv.style.backgroundColor);
  23.    console.log(getStyle(oDiv,'background'));
  24. }
  25.  
  26. function getStyle(obj, attr){
  27.     //只适用于IE
  28.     if(obj.currentStyle){
  29.         return obj.currentStyle[attr];
  30.     }else{
  31.         //适用于FF,Chrome,Safa
  32.         return getComputedStyle(obj,false)[attr];
  33.     }
  34. }
  35. </script>
  36. </html>

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

参数解析:

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

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

获取样式属性升级版：

  1. function getStyle(obj, attr , pseudoElt=false){
  2.     return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,pseudoElt)[attr]
  3. }

源代码地址：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. Jmeter操作之跨线程组传递参数

    思路:将某一线程组内的变量通过“__setProperty”函数设置成jmeter的全局变量,在另一线程组中通过“__P”函数调用即可. 1.添加-后置处理器-BeanShell PostProces ...

  2. mysql之整合ssm多数据源配置

    一,基于SSM框架的多数据源配置 1.创建DynamicDataSourceHolder用于持有当前线程中使用的数据源标识 public class DynamicDataSourceHolder { ...

  3. 学习bootstrap3

    官方手册(英文):http://getbootstrap.com/docs/3.3/getting-started/ 中文文档:https://v3.bootcss.com/getting-start ...

  4. Git使用过程中的问题

    Q-1:怎么切换到远程的分支 本地已经有一个代码库了(是从github上clone的),但是现在远程库中一个新的branch,怎么拉取远程分支,并在本地创建该分支(内容一样).how to do? # ...

  5. 解决ConnectionRefusedError: [WinError 10061] 由于目标计算机积极拒绝，无法连接。

    解决办法:

  6. PHP--高级算法--面试

    数据结构和算法(转载) 原文地址:  https://blog.csdn.net/s1070/article/details/51174725 1.使对象可以像数组一样进行foreach循环,要求属性 ...

  7. Vue+iview实现添加删除类

    <style> .tab-warp{ border-bottom: solid 1px #e0e0e0; overflow: hidden; margin-top: 30px; posit ...

  8. Azure系列2.1.3 —— BlobEncryptionPolicy

    (小弟自学Azure,文中有不正确之处,请路过各位大神指正.) 网上azure的资料较少,尤其是API,全是英文的,中文资料更是少之又少.这次由于公司项目需要使用Azure,所以对Azure的一些学习 ...

  9. tensorflow实现基于LSTM的文本分类方法

    tensorflow实现基于LSTM的文本分类方法 作者:u010223750 引言 学习一段时间的tensor flow之后,想找个项目试试手,然后想起了之前在看Theano教程中的一个文本分类的实 ...

  10. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

    今天服务器遇到了一个很熟悉的问题, 输入 #mysql -u root -p   ERROR 2002 (HY000):Can't connect to local MySQL server     ...