在对网页进行调试的过程中，经常会用到js来获取元素的CSS样式，

1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），而无法获取定义在<style type="text/css">里面的样式属性值

<!DOCTYPE html>

<html>

<head>

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

<title>JS获取CSS属性值</title>

<style type=”text/css”>

    #css{color:blue;}

</style>

</head> 

<body>

<div id="css" class="ss" style="width:100px;height:150px;background:red">JS获取CSS属性值</div> 

<script>

    alert(document.getElementById("css").style.width);   //100px

    alert(document.getElementById("css").style.height);  //150px

    alert(document.getElementById("css").style.color);   //弹出空白，获取不到type=”text/css”里的属性值

</script>

</body>

</html>

代码运行后，顺利弹出第一个div的宽度、高度，但是最后一个文字颜色却弹出空白。

之前很多朋友可能认为dom.style属性无所不能，不但能设置元素的样式，也能够获取到对应的样式值。

然而事实是，dom.style只能够获取通过如下方式设置的CSS属性值：

（1）.HTML标签的style属性设置CSS属性值。

（2）.dom.style.width="100px"这样类似设置CSS属性值。

此时，getComputedStyle方法的功能得以体现，它可以获取元素CSS属性的最终计算值。

2.IE中使用的是obj.currentStyle方法，其他浏览器用的是getComputedStyle 方法 

TIP:所有浏览器均支持此方法，IE9+浏览器支持此方法。

“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。

　　window.getComputedStyle(element, [pseudoElt])

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

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

 <html>

 <head>

 <title>计算元素样式getComutedStyle方法</title>

 <style>

 #myDiv {

     background-color:red;

     width:100px;

     height:200px;

 }

 </style>

 <body>

 <div id ="myDiv" style=" border:1px solid blue"></div> 

 <script>

     var myDiv = document.getElementById("myDiv");

     var computedStyle = document.defaultView.getComputedStyle(myDiv, null);

 　　//document.defaultView也可改为window
　　　　//在很多代码中也有document.defaultView.getComputedStyle()形式，不过它和window.getComputedStyle()的区别可以忽略不计，除了在IE8的浏览器才会建议使用后者
　　　　//因为在当前的浏览器中一般没有不会有任何问题。

     alert(computedStyle.backgroundColor); //"red" //rgb(255, 0, 0)

     alert(computedStyle.width);         //"100px"

     alert(computedStyle.height);         //"200px"

     alert(computedStyle.border);         //在某些浏览器中是“1px solid black”  //1px solid rgb(0, 0, 255)

 </script>

 </body>

 </head>

 </html>

3.封装成函数

1.

function getStyle(obj,attr){

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

 }

 var oDiv = document.getElementById("test");

alert(getStyle(oDiv,"top"));

2.下面这个函数，能够获取一个元素的任意 CSS 属性值

 function getStyle(element, attr) {

         if(element.currentStyle) {

                 return element.currentStyle[attr];

         } else {

                 return getComputedStyle(element, false)[attr];

         }

 }
如果想获得 lists 的 left 属性值，只需要：getStyle(lists,"left")

原生js使用getComputedStyle方法获取CSS内部属性值的更多相关文章

  1. JS使用getComputedStyle()方法获取CSS属性值

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

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

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

  3. 获取css的属性值

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

  4. 原生js动态创建、获取、删除属性的几种方式

    1.创建属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  5. 【总结整理】js获取css的属性（内部，外部，内嵌（写在tag中））

    在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空 ...

  6. getComputedStyle方法获取元素CSS值

    javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...

  7. 原生JS添加节点方法与jQuery添加节点方法的比较及总结

    一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...

  8. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  9. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

随机推荐

  1. 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

    本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...

  2. 试试 IEnumerable 的另外 6 个小例子

    IEnumerable 接口是 C# 开发过程中非常重要的接口,对于其特性和用法的了解是十分必要的.本文将通过6个小例子,来熟悉一下其简单的用法. <!-- more --> 阅读建议 在 ...

  3. Day005_Linux基础之文件权限

    test.sh  举例: [oldboy@luffy001 ~]$ ls -l test.sh -rw-r--r-- 1 oldboy ops 0 Nov 14 10:42 test.sh  该文件权 ...

  4. 史上最全 69 道 Spring 面试题和答案

    史上最全 69 道 Spring 面试题和答案 目录Spring 概述依赖注入Spring beansSpring注解Spring数据访问Spring面向切面编程(AOP)Spring MVC Spr ...

  5. NOIP要炸？

    今天起床,翻我的群,突然看见一条消息: “NOIP要被禁赛了!” 莫名奇妙啊...... 于是我就进去看了看,网上疯传,搞得跟真的一样,差点吓到我了. 但好在每个人心中都有一个阿Q,会精神胜利法,于是 ...

  6. 史上最全Docker环境安装指南-让安装docker简单到爆

    一.思考❓❔ 1.什么是Docker? 装应用的容器 开发.测试.运维都偏爱的容器化技术 轻量级 扩展性 一次构建.多次分享.随处运行 2.安装Docker难不难? So easy! 此文看过之后,读 ...

  7. zookeeper学习(一)_简介

    上篇文章 我们已经安装上了zookeeper,也简单的体验了一把,但是如果让你给别人介绍下zookeeper,可能也是说不出来.本篇文章就参考了网上各位优秀博主的文章,整理出自己更能理解的内容 优秀博 ...

  8. Kafka源码分析及图解原理之Broker端

    一.前言 https://www.cnblogs.com/GrimMjx/p/11354987.html 上一节说过,任何消息队列都是万变不离其宗都是3部分,消息生产者(Producer).消息消费者 ...

  9. apache ignite系列（六）： 服务网格

    简介 ​ 服务网格本质上还是远程方法调用(RPC),而在ignite中注册的服务本质体现还是以cache的形式存在,集群中的节点可以相互调用部署在其它节点上的服务,而且ignite集群会负责部署服务的 ...

  10. Python集训营45天—Day04 （函数）

    目录 1. 函数介绍 2. 函数的参数 3. 模块与函数 4. 递归函数 5. 匿名函数 6. 多返回值 python 的学习已经进入到第四天,前面几章我们已经学会了基本的变量操作,以及分支结构和循环 ...