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

<div id="dv" style="width: 100px;height: 200px;background-color: pink; border: 1px solid green;"></div>
    <script>
        var dv = document.getElementById("dv");
        console.log(dv.style.width);    //100px
        console.log(dv.style["height"]);//200px
        console.log(dv.style.backgroundColor);//pink
        console.log(dv.style.border);//1px solid green
    </script>

2.对于外联样式表或者头部的style标签内的样式表里的样式内容,用上面的方法无法获得

可以使用js中的window.getComputedStyle(element,pseudoElement).属性名的方法获得。获取的样式是元素在浏览器中最终渲染效果的样式。

其中window.可以省略

其中pseudoElement: 可选,伪类元素,当不查询伪类元素的时候可以忽略或者传入 null。

<style>
        #dv2{
            width: 100px;
            height: 200px;
            background-color: #0086b3;
            border: 1px solid red;
        }
    </style>
 <div id="dv2" style="border-color: black"></div>
    <script>
        var dv2 = document.getElementById("dv2");
        console.log(dv2.style["height"]);//空值,没有内联该样式无法获取
        console.log(dv2.style.backgroundColor);//空值,没有内联该样式无法获取
        console.log(window.getComputedStyle(dv2,null).width);//100px
        console.log(getComputedStyle(dv2,null).backgroundColor);//rgb(0, 134, 179)
        console.log(getComputedStyle(dv2,null).border); //1px solid rgb(255, 0, 0),内联样式修改成了黑色,内联的权重更高。
        console.log(getComputedStyle(dv2,null)["border"]); //1px solid rgb(255, 0, 0)键值对的方式当然也行

    </script>

3.修改CSS样式,只能通过ele.style.属性名的方式修改CSS样式,不能通过getComputedStyle()的方法修改。

JS中获取CSS样式的方法的更多相关文章

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

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

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

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

  3. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  4. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  5. 重温JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  6. js 设置 获取css样式

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

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

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

  8. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  9. js中获取css的样式

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

随机推荐

  1. _beginThreadex创建多线程解读【转】

    _beginThreadex创建多线程解读 一.需要的头文件支持 #include <process.h>         // for _beginthread() 需要的设置:Proj ...

  2. Android优化系列之ListView优化老生常谈

    本文内容:adapter,listview的优化,RecycleBi,google大会推荐优化, 实现ListView的过程,Adapter起到了至关重要的作用,不仅仅因为getview()方法.那么 ...

  3. java的学习路线

     首先是培养兴趣.先开始学习HTML知识.也就是做网页,从这里开始比较简单,就是几个标签单词需要记住.  接着开始学习CSS,这里开始不要学习非常多,只要能作出简单类似hao123之类的静态网页就已经 ...

  4. js函数收藏:获取cookie值

    //先设置一段子cookie var d = new Date(); d.setMonth(d.getMonth() + 1); d = d.toGMTString(); var a = " ...

  5. 展开BOM并使用最终用量的算法(转载)

    本文系转载子ITPUB,如果有侵犯您权益的地方,烦请及时的告知与我,我即刻将停止侵权行为: 网址:http://www.itpub.net/thread-1020586-1-1.html http:/ ...

  6. ubuntu下如何安装和卸载wine-qq

    1.安装wine 按ctrl+alter+T打开终端输入以下两条命令 sudo apt-get update sudo apt-get install wine 安装时间有点长,请耐心的等候 2.按钮 ...

  7. ScrollView嵌套ListView后,进入页面不从顶部开始显示的问题解决

    ScrollView嵌套ListView后,进入页面不从顶部开始显示的问题解决 首先,正常情况下,如果在ScrollView里嵌套ListView后,会发现ListView只显示1条数据 那么,为了解 ...

  8. Java gc中的那些事

    我们已经知道Java堆是被所有线程共享的一块内存区域,所有对象实例和数组都在堆栈进行内存分配.为了进行高效的垃圾回收,虚拟机把堆内存划分成新生代年代(旧一代)和永久代(永久代)3个区域. 新生代 新生 ...

  9. Java Map 键值对排序 按key排序和按Value排序

    一.理论准备 Map是键值对的集合接口,它的实现类主要包括:HashMap,TreeMap,Hashtable以及LinkedHashMap等. TreeMap:基于红黑树(Red-Black tre ...

  10. 20145319 《网络渗透》免考—API拦截技术

    20145319 <网络渗透>免考-API拦截技术 概述 本次实验在window环境下进行,主要通过编写hook代码和注入程序,将我们的hook代码通过dll文件的形式注入到目标中,拦截其 ...