样式获取

  • 普通获取属性方式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. 【sql技巧】mysql修改时，动态指定要修改的字段 update `table` set (case when ....) = 1 where id = xx

    如果你点进了这篇帖子,那么你一定遇到了跟我一样的问题.别看题目的set case when...,我一开始也是第一反应是用case when但是发现并不好使. 问题呢,说得高大上一点:动态指定要修改的 ...

  2. Html5离线缓存简介

    一. 什么是manifest 首先manifest是一个后缀名为minifest的文件,在文件中定义那些需要缓存的文件,支持manifest的浏览器,会将按照manifest文件的规则,像文件保存在本 ...

  3. eclipse编译项目用maven编译问题

    1.eclipse只是个ide开发环境,并没有编译器功能.没有编译器.eclipse编译项目只是调jdk本地的java编译器.maven是单独编译,eclipse可以调用maven编译, 在eclip ...

  4. IIS: 配置web.config解决Maximum request length exceeded错误

    In system.web <httpRuntime maxRequestLength="1048576" executionTimeout="3600" ...

  5. (寻找第K小的数&amp;&amp;寻找第K小的数的和)

    这一篇博客以一些OJ上的题目为载体,讲一下寻找第K小的数的方法 方法一: 先将数据排列好,然后,然后return a[k]或者将前K个数加起来 方法二: 基于高速排序.如,一次高速排序将某一个数放到了 ...

  6. scikit-learn：4.7. Pairwise metrics, Affinities and Kernels

    參考:http://scikit-learn.org/stable/modules/metrics.html The sklearn.metrics.pairwise submodule implem ...

  7. 更改App.config里的值并保存

    using System; using System.Collections.Generic; using System.Configuration; using System.IO; using S ...

  8. java(JSP)中几种获取项目路径方式

    在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getPro ...

  9. HDU - 3631 Shortest Path(Floyd最短路)

    Shortest Path Time Limit: 1000MS Memory Limit: 32768KB 64bit IO Format: %I64d & %I64u SubmitStat ...

  10. 通常每个套接字地址(协议/网络地址/端口)只允许使用一次。 数据库连接不释放测试 连接池 释放连接 关闭连接 有关 redis-py 连接池会导致服务器产生大量 CLOSE_WAIT 的再讨论以及一个解决方案

    import pymysqlfrom redis import Redisimport time h, pt, u, p, db = '192.168.2.210', 3306, 'root', 'n ...