样式获取

  • 普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式，只能获取行内式

window.getComputedStyle(div, null)

  • 返回元素的长宽等带有单位px
  • 第二个参数是伪类，没有填null
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    div {

        width: 400px;

        height: 500px;

        background-color: black;

        margin-left: 500px;

        position: relative;

    }

    div:after {

        content: "";

        position: absolute;

        width: 50px;

        height: 50px;

        background-color: pink;

        top: 50px;

        left: 100px;

    }

    </style>

</head>

<body>

    <div></div>

    <script type="text/javascript">

    var div = document.getElementsByTagName("div")[0];

    console.log(typeof window.getComputedStyle(div, null)); //object

    console.log(window.getComputedStyle(div,':after')['width']);//50px

    console.log(window.getComputedStyle(div, null).width); //400px

    console.log(window.getComputedStyle(div, null)["width"]); //400px

    console.log(window.getComputedStyle(div, null)["background-color"]); //rgb(255, 192, 203)

    console.log(window.getComputedStyle(div, null).backgroundColor); //rgb(255, 192, 203)

    </script>

</body>

</html>

div.currentStyle（IE678）

<script>

    var div = document.getElementsByTagName("div")[0];

    console.log(div.currentStyle["width"]);

    console.log(div.currentStyle.width);

</script>

兼容写法

<script>

    var div = document.getElementsByTagName("div")[0];

    console.log(getStyle(div, "width"));

    console.log(getStyle(div, "backgroundColor"));

    function getStyle(ele, attr) {

        if (window.getComputedStyle) {

            return window.getComputedStyle(ele, null)[attr];

        }

        return ele.currentStyle[attr];

    }

</script>

JS——样式获取的兼容写法的更多相关文章

  1. js事件的一些兼容写法

    事件兼容 事件对象的兼容 获取键码兼容 默认行为兼容 阻止事件冒泡兼容 事件监听兼容 ---- 封装 删除事件监听兼容 ---- 封装 事件委托->获取事件源兼容

  2. js处理事件冒泡（兼容写法）

    event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event. ...

  3. js Date格式化时间兼容写法

    var time = "2018-03-12 11:11:11".split(/[- : \/]/); date = new Date(time[0], time[1]-1, ti ...

  4. js基础--获取浏览器当前页面的滚动条高度的兼容写法

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...

  5. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  6. javascript获取行间样式和非行间样式--兼容写法

    style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...

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

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

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

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

  9. 样式计算的几种方式与兼容写法：getComputedStyle&currentStyle&style

    window.getComputedStyle(element,[string]) 1参为需要获取样式的元素,2参指定伪元素字符串(如“::after”,不需要则为null),设置2参可获取eleme ...

随机推荐

  1. 在DJANGO中如何定义get_absolute_url

    有好几种办法呢... 书上有说: 常见的: class Image(models.Model): user = models.ForeignKey(settings.AUTH_USER_MODEL, ...

  2. Keywords Search AC自动机

    In the modern time, Search engine came into the life of everybody like Google, Baidu, etc. Wiskey al ...

  3. CHAPTER 1 Architectural Overview of Oracle Database 11g

    Which SGA structures are required, and which are optional? The database buffer cache, log buffer, an ...

  4. HDUJ 2070 Fibbonacci Number

    Fibbonacci Number Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  5. 从Linux 2.6.8内核的一个TSO/NAT bug引出的网络问题排查观点(附一个skb的优化点)

    梦中没有错与对,梦中没有恨和悔...最好闭上你的嘴.这样才算可爱...我不会说:这不公道,我不能接受.我会用朴素的文字记录点点滴滴,早上4点多起来,一气呵成最近的收获与评价,愤慨与忏悔. 四年多前的一 ...

  6. Unicode不可见字符的显示

    Unicode的学名是”Universal Multiple-Octet Coded Character Set”,简称为UCS 不可见字符”/u200b”为 Unicode Character ‘Z ...

  7. js上传文件

    一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...

  8. ping测试局域网内主机是否alive

    [root@zabbix ~]# cat alivehost.sh #!/bin/bash #Checks to see if hosts 192.168.1.100-192.168.1.200 ar ...

  9. js 四种调用方式 Method Invocation Pattern

    4.3. Invocation Invoking a function suspends the execution of the current function, passing control ...

  10. UVA1602 Lattice Animals 搜索+剪枝

    题目大意 给出一个$w\times h$的网格,定义一个连通块为一个元素个数为$n$的方格的集合$A,\forall x\in A, \exists y\in A$,使得$x,y$有一条公共边.现要求 ...