访问属性：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. scc

    CSS简介 CSS介绍 CSS(cascading style sheet,层叠样式表)是一种制作网页的新技术,现在已经为大多数浏览器所支持,成为网页设计必不可少的工具之一 CSS语法 CSS实例 每 ...

  2. VS2017 下使用 git. git服务器使用gitblit

    注意事项: 创建的GIT不要包括有中文, 不然会不成功的..... gitblit安装及配置及客户端下载略过...... 可参考:  https://www.cnblogs.com/jeremylee ...

  3. HYSBZ - 2243 染色 (树链剖分+线段树)

    题意:树上每个结点有自己的颜色,支持两种操作:1.将u到v路径上的点颜色修改为c; 2.求u到v路径上有多少段不同的颜色. 分析:树剖之后用线段树维护区间颜色段数.区间查询区间修改.线段树结点中维护的 ...

  4. 2018 Multi-University Training Contest 1 - B Balanced Sequence （贪心）

    题意:对N个由(,)组成的字符串,求拼接后得到的最大的balance序列的长度.balance序列:空串/ A+B(A,B都是b序列)/ (+A+),A为b序列.此三种情况. 分析:在读入N每个字符串 ...

  5. sublime Text emmet插件使用手册

    转自:http://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工 ...

  6. adas--智能驾驶辅助系统

    先进驾驶辅助系统(Advanced Driver AssistantSystem),简称ADAS,是利用安装于车上的各式各样的传感器(可侦测光.热.压力等变数), 在第一时间收集车内外的环境数据, 进 ...

  7. Entity FrameWork 配置 之连接字符串隐藏或重用

    C/S项目中使用EF,默认回生成app.config文件夹,软件打包安装成功之后就回生成一个对应exe.config.里面会包含配置的一些信息. 这里介绍给大家一种隐藏连接字符串的方式. 代码如下: ...

  8. 使用GoogleCode作SVN服务器的一些问题及解决办法

    1.首先最主要的一个问题,就是注册GoogleCode和安装SVN工具. 网上教程很多,不一一赘述.http://www.th7.cn/Program/net/201305/136059.shtml ...

  9. 【c++ primer, 5e】访问控制与封装

    练习 7.16 无,类的接口定义在public说明符之后,类的实现细节定义在private说明符之后. 7.17 有.类成员的默认访问权限不同.class的类成员默认为private,struct的则 ...

  10. 会话控制Cookie的应用

    Cookie是一种由服务器发送给客户端的片段信息,存储在客户端浏览器的内存或者硬盘上,在客户端对服务器的请求中发回它.PHP透明地支持HTTP Cookie.可以利用他在远程浏览器端存储数据并以此来跟 ...