访问属性：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. https过程

    HTTPS在传输数据之前需要客户端(浏览器)与服务端(网站)之间进行一次握手,在握手过程中将确立双方加密传输数据的密码信息.TLS/SSL协议不仅仅是一套加密传输的协议,更是一件经过艺术家精心设计的艺 ...

  2. Web前端学习笔记之BootStrap

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...

  3. 基于HTML5和SVG的手机菜单动画

    在线演示 本地下载

  4. Vmware ESXi 6.0 多Vlan部署，vSphere Client管理方法

    背景: 公司IT部门新购了两台服务器与一台存储,打算做虚拟化,并将存储分成两个部分,分别配给那两台服务器.在宿主机上要安装的虚拟机属于不同的网段,这就涉及了多VLAN,当然这并不是多么高深的技术,属于 ...

  5. float 为什么可以表示很大的整数

    1.float型:单精度浮点数在机内占4个字节,用32位二进制描述(注意:计算机中1个字节=8位). 2.浮点数在机内用指数型式表示,分解为:数符,尾数,指数符,指数四部分. 3.可以算出float型 ...

  6. Cocos2d-x项目移植到WP8系列之九：使用自定义shader

    本文原链接:http://www.cnblogs.com/zouzf/p/3995132.html 有时候想得到一些例如灰度图等特殊的渲染效果,就得用到自定义shader,关于shader的一些背景知 ...

  7. uiautomator-CTS上运行，出xml报告

      一.CTS 介绍与命令说明 主要介绍: CTS下载与配置 CTS目录说明 CTS基本命令说明 Windows系统下运行CTSCTS 全称Compatibility Test Suite 兼容性测试 ...

  8. maven项目在eclipse的library中没有Maven Dependencies

    今天使用maven创建了一个多模块的项目,在分别创建完父项目和各个子模块后,编译父项目的时候,父项目工程目录上出现了一堆红叉叉,点进去一看,是找不到依赖的类,但是pom文件中相应jar的depende ...

  9. 02-JZ2440裸机学习之MMU内存管理单元【转】

    本文转载自:https://blog.csdn.net/fengyuwuzu0519/article/details/66479248 1.MMU定义: MMU是Memory Management U ...

  10. uitableview 侧滑删除

    https://github.com/MortimerGoro/MGSwipeTableCell