样式获取

  • 普通获取属性方式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. Truck History（卡车历史）

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 26547   Accepted: 10300 Description Adv ...

  2. nginx,tornado,websocket,supervisord配置成型

    因为要上生产环境,所以配置还是专业一些比较好. nginx.conf upstream websocket_host { server 127.0.0.1:9527; } location /ws_l ...

  3. log4j.properties的简单配置和使用

    log4j.properties  // 日志文件名不能随便写, 是properties文件 log4j.rootLogger=INFO, Console //表示INFO级别 输出到控制台 #Con ...

  4. 记一次 Hibernate 插入数据中文乱码报错解决

    错误描述 程序运行,向表中插入数据(包含中文)报错:\xE6\xB2\x88\xE9\x9B\xAA... 但是自己另外新建一个数据库手动插入数据中文正常,同样修改数据库,表的编码之后同样不行.而且 ...

  5. vijos 1439 区间

    区间 背景 描述 给定n个闭区间 [ai,bi], i=1,2,...,n. 这些区间的和可以用两两不相交的闭区间的和来表示.你的任务是找到这样的区间数目最少的表示,且把它们按升序的方式写到输出文件中 ...

  6. Python3基础（九） 错误和异常

    本文主要介绍Python中的错误和异常,涉及到简单的异常处理.抛出异常以及清理动作.至于自定义异常类,将在介绍类与继承的时候讲到. 一.定义 常见的两种错误:语法错误 和 异常. 1.语法错误(Syn ...

  7. Python3基础（七） I/O操作

    一个程序可以从键盘读取输入,也可以从文件读取输入:而程序的结果可以输出到屏幕上,也可以保存到文件中便于以后使用.本文介绍Python中最基本的I/O函数. 一.控制台I/O 读取键盘输入 内置函数in ...

  8. hive学习笔记-表操作

    Hive数据类型 基本数据类型 tinyint,smallint,int,biging,float,double,decimal,char,varchar,string,binary,boolean, ...

  9. UVa563_Crimewave(网络流/最大流)(小白书图论专题)

    解题报告 思路: 要求抢劫银行的伙伴(想了N多名词来形容,强盗,贼匪,小偷,sad.都认为不合适)不在同一个路口相碰面,能够把点拆成两个点,一个入点.一个出点. 再设计源点s连向银行位置.再矩阵外围套 ...

  10. ※交换排序(1)——快速排序（quick sort）

    快速排序使用分治策略(Divide and Conquer)来把一个序列分为两个子序列.步骤为: 从序列中挑出一个元素,作为"基准"(pivot). 把所有比基准值小的元素放在基准 ...