访问属性：obj.attr 或者 obj['attr']

通过js访问style属性 :

document.getElementById("main").style.backgroundColor;

style 只能获取元素的内联样式。因此，要获取元素的完整的样式信息，必须使用 window 对象的 getComputedStyle 方法，此方法有2个参数，第一个参数为要获取计算样式的元素，第二个参数可以是null、空字符串、伪类(如:before,:after)，这两个参数 都是必需的。

完整实例：

<!doctype html>
<html>

<head>

    <style>

        #mask {

            position: absolute;

            z-index: 1000;

            top: 10px; left: 0;

            background: blue;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

<div id="mask" style="border: dashed"></div>

<script>

    var mask = document.getElementById('mask');

    var style = window.getComputedStyle(mask, "");

    console.log('34',style.position,mask.style.border);

</script>

</body>

</html>

原生JavaScript获取css样式的更多相关文章

  1. 重温JavaScript获取CSS样式的方法（兼容各浏览器）

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  2. 原生javascript 获得css样式有几种方法？

    css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用  ele.style."属性名称"(如果遇到属性名称带有"-", ...

  3. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

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

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

  5. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 利用原生JavaScript获取样式的方式小结

    来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能 ...

  7. 原生JS获取HTML样式并修改

    大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出 ...

  8. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  9. js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法

    用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...

随机推荐

  1. Django基础一

    Django基础一 Web框架本质 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演 ...

  2. 微信小程序将带来web程序员的春天！

    微信之父张小龙在年初那次演讲中曾表示:“我自己是很多年的程序员,我觉得我们应该为开发的团体做一些事情.”几个月后,微信正式推出微信应用号(即微信小程序)在互联网中掀起又一波热潮. 过去,对于很多开发者 ...

  3. HDU - 6333 Problem B. Harvest of Apples (莫队+组合数学)

    题意:计算C(n,0)到C(n,m)的和,T(T<=1e5)组数据. 分析:预处理出阶乘和其逆元.但如果每次O(m)累加,那么会超时. 定义 S(n, m) = sigma(C(n,m)).有公 ...

  4. Jmeter使用非 GUI 模式，即命令行模式运行实例讲

    转载:http://www.cnblogs.com/leeboke/p/5238269.html 参考资料:https://girliemangalo.wordpress.com/2009/10/29 ...

  5. linux mkisofs(genisoimage)命令用法

    功能说明:建立ISO 9660映像文件. 常用命令:genisoimage -o imagename.iso file 语 法:mkisofs [-adDfhJlLNrRTvz][-print-siz ...

  6. 理解 JavaScript call()/apply()/bind()

    理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...

  7. 20145201 《Java程序设计》第五周学习总结

    20145201 <Java程序设计>第五周学习总结 教材学习内容总结 本周学习了课本第八.九章内容,即异常处理.Collection与Map. 第八章 异常处理 8.1 语法与集成架构 ...

  8. void及void指针介绍【转】

    本文转载自:http://blog.csdn.net/renren900207/article/details/20769503 void类型指针(如void *p)所指向的数据类型不是确定的,或者说 ...

  9. 织梦DedeCMS实现 三级栏目_二级栏目_一级栏目_网站名称 的效果代码

    1.将官方原来的排列方式反过来,找到include/typelink.class.php第164行 $this->valuePositionName = $tinfos['typename']. ...

  10. Dijkstra算法 - 最短路径算法

    2017-07-26 22:30:45 writer:pprp dijkstra算法法则:设置顶点集合S,首先将起始点加入该集合,然后根据起始点到其他顶点的路径长度, 选择路径长度最小的顶点加入到集合 ...