访问属性：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. day4 字符串的使用方法

    一.字符串切片 索引和切片 [起始位置:结束位置:步长] s1 = 'python全栈8期' # 索引从0开始[索引(下标,index)] print(s1[0]) print(s1[3]) prin ...

  2. python数据可视化、数据挖掘、机器学习、深度学习 常用库、IDE等

    一.可视化方法 条形图 饼图 箱线图(箱型图) 气泡图 直方图 核密度估计(KDE)图 线面图 网络图 散点图 树状图 小提琴图 方形图 三维图 二.交互式工具 Ipython.Ipython not ...

  3. boot空间不足，删除Ubuntu旧内核

    0 Problem 今天打开电脑的时候ubuntu提示boot空间不足.查了资料,原来Ubuntu的自动升级并没有删除系统的旧内核,于是boot下旧的内核文件越积越多,最后就满了. 1 Solutio ...

  4. python入门四：异常

    一.异常 异常就是在触发异常条件时(解释器或程序员)而采取相应的措施 c++中异常使用try, throw, catch等关键字,而python中使用try, raise, except等 二.标准异 ...

  5. vm安装centos7 Minimal 配置静态ip添加dns: 解决连不上网

    去centos官网下载需要的镜像:https://www.centos.org/ 安装完成后,在centos7中,ifconfig命令已经不存在了,查看ip的命令 # ip addr 发现ens*** ...

  6. Hadoop中RPC协议小例子报错java.lang.reflect.UndeclaredThrowableException解决方法

    最近在学习传智播客吴超老师的Hadoop视频,里面他在讲解RPC通信原理的过程中给了一个RPC的小例子,但是自己编写的过程中遇到一个小错误,整理如下: log4j:WARN No appenders ...

  7. 20145235李涛《网络对抗》Exp9 Web安全基础实践

    基础问答 SQL注入攻击原理,如何防御? SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意SQL命令的目的. 对于SQL注入攻击的防范 ...

  8. 关于div可编辑的复制粘贴问题

    todoFilter(e) { e.preventDefault(); if (!e.target.getAttribute('contenteditable')) { return; } const ...

  9. GitLab 安装与入门

    GitLab介绍: GitLab是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目. GitLab拥有与Github ...

  10. springboot创建多环境profile打包

    springboot开发打包时,一般会有多个环境,dev,qa,prod等,配置文件大多雷同,只是方便开发切换,但是生成部署时产生的war包就无需这么多重复配置了,这时这些dev,qa的配置就不应该打 ...