样式获取

  • 普通获取属性方式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. 170611 NOIP模拟赛

    第一题没做出来不应该: 第二题不难想,就是写起来很麻烦: 第三题因为学了挺久的splay就直接写的splay,没太在意常数问题,一般情况下,第k值问题主席树是比splay稍快的: 盘子序列 [题目描述 ...

  2. 深刻理解Python中的元类(metaclass)--代码实践

    根据http://blog.jobbole.com/21351/所作的代码实践. 这篇讲得不错,但以我现在的水平,用到的机会是很少的啦... #coding=utf-8 class ObjectCre ...

  3. MYSQL中有关数据库的简单操作

    #创建数据库CREATE DATABASE day01; #查询所有数据库SHOW DATABASES; #查看某个数据库定义信息SHOW CREATE DATABASE day01; #查询正在使用 ...

  4. JAVA之中出现无法加载主类的情况解决方法

    j今天打代码的时候出现了无法加载主类的情况,我就收集了一些,java无法加载主类的方法 ava无法加载主类解决办法 今天启动项目,又遇到找不到或无法加载主类的情况,清除项目后无法编译,class文件下 ...

  5. 30、Java并发性和多线程-阿姆达尔定律

    以下内容转自http://ifeve.com/amdahls-law/: 阿姆达尔定律可以用来计算处理器平行运算之后效率提升的能力.阿姆达尔定律因Gene Amdal 在1967年提出这个定律而得名. ...

  6. [JavaEE] JTA, Java Transaction API, Repository for DB opreations

    Mainly two things: 1. For all the creating and deleting opreations for the DB, we want to use 'REQUI ...

  7. LeetCode 160. Intersection of Two Linked Lists （两个链表的交点）

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  8. IE浏览器 多版本之间切换

    由于Win7系统最低支持IE8的版本,不能通过安装IE7版本来达到要求. 有一个替代方案,通过IE自带Emulation来实现,实现步骤如下: 打开现有的IE浏览器 按下F12键 切换到“Emulat ...

  9. VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形（折线图，柱状图）

    1.前期准备 具体可见VS2010 使用TeeChart绘图控件 - 之一 控件和类的导入 1. 1 添加TeeChart控件,给控件添加变量m_TeeChart 添加TeeChart控件,右击控件, ...

  10. 【POJ 2018】 Best Cow Fences

    [题目链接] http://poj.org/problem?id=2018 [算法] 二分平均值 检验时将每个数减去二分的值,求长度至少为L的子序列和的最大值,判断是否大于0 [代码] #includ ...