样式获取

  • 普通获取属性方式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. 交友app

    编辑注记:这是由译者 han_qi 翻译纽约客的一篇文章,从女性的角度描写了交友产品的用户体验及需求,值得广大产品经理深入研究,文章略长,但值得深读.原文<Overwhelmed and Cre ...

  2. IT领域的罗马帝国——微软公司

    微软公司从做软件开始,起步很小.但是盖茨确是一直深耕于战略布局,像一个棋局高手,每一步棋都是看了后面几步. 盖茨居然用9年的时间憋出一个win3.0,成功击败了apple. 而这9年拖住apple的居 ...

  3. Ubuntu 16.04通过Unity Tweak Tool实现点击图标最小化

    1.通过Ubuntu软件中心安装Unity Tweak Tool 2.设置

  4. 1.7－BGP③

    IBGP的水平分隔原则(Split Horizon Rule): IBGP的水平分割原则:by default,routes learned via IBGP are never propagated ...

  5. C#趣味程序---九九乘法表

    using System; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { for ...

  6. C++学习之命名空间

    在C++中,命名空间(namespace)的目的是为了防止名字冲突.每个命名空间是一个作用域,在所有命名空间之外,还存在一个全局命名空间(global namespace),全局命名空间以隐式的方式声 ...

  7. Android CardView使用和导入出错问题

    Android CardView使用和导入出错问题 第一部分:导入Android CardView出错的问题. Android CardView是Android在support.v7包里面的一个vie ...

  8. AutoLayout初战----Masonry与FDTemplateLayoutCell实践

    学iOS也有几个月了.一直都是纯代码开发,菜鸟入门,到今天还处在Frame时代.刚好近期项目在提审.有点时间能够学学传说中的AutoLayout.事实上.就是android的相对布局(Relative ...

  9. U4699 鸡蛋

    U4699 鸡蛋 0通过 37提交 题目提供者飞翔 标签 难度尚无评定 提交 最新讨论 暂时没有讨论 题目背景 调皮的kkk准备恶搞他的同学兼朋友——你! 题目描述 kkk准备从楼上扔鸡蛋下来砸在lz ...

  10. Windows的所有风格与扩展风格

    SetWindowLonghttp://msdn.microsoft.com/en-us/library/windows/desktop/ms633591(v=vs.85).aspxWindow St ...