利用currentStyle()和ComputedStyle()

1 通常用法：

balance为类名

window.getComputedStyle(document.querySelector(".balance"), null).backgroundColor；

window.getComputedStyle(document.querySelector(".balance"), null).fontSize；

2 封装一个函数：

function getstyle(obj, key) {

if (obj.currentStyle) {

return  obj.currentStyle.key;

} else {

Return  getComputedStyle(obj, mull).key;

}

}

封装进getstyle函数

js获得当前元素的样式的更多相关文章

  1. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

  2. 用JS改变的元素CSS样式，css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  3. （知识点）JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

  4. js中获取元素的样式兼容性的写法

    1:设计元素的样式:el.style.color="red"||el.style["color"]="red"  获取元素的样式:el.st ...

  5. 通过JS动态的修改HTML元素的样式和增添标签元素等

    一. 通过JS动态的修改HTML元素的样式   1. 要想在js中动态的修改HTML元素的样式,首先需要写document,    document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...

  6. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  7. JS 之设置元素样式的改变，可以利用样式框架

    如果已经将某个元素的样式设定好了,又想改变,可以利用样式框架: function setStyle(obj,attr,value){ obj.style[attr]=value;//注意此处attr的 ...

  8. 通过js读取元素的样式

    /* * 通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值 * 所以如果要获取除内联样式后的值,就不能通过这个获取 * alert(box ...

  9. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. Django 学习笔记（二） --- HTML 模版

    人生苦短 ~ Tips:仅适用于 Python 3+(反正差别不大,py2 改改也能用).因为据 Python 之父 Guido van Rossum 说会在 2020 年停止对 Python 2 的 ...

  2. Bootstrap-table 使用总结

    一.什么是Bootstrap-table? 在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这 ...

  3. vue.js 使用时间组件 日期少一天的问题

    <el-form :inline="true" class="demo-form-inline padding-top-20"> <el-fo ...

  4. mysql查询语句，通过limit来限制查询的行数。

    mysql查询语句,通过limit来限制查询的行数. 例如: select name from usertb where age > 20 limit 0, 1; //限制从第一条开始,显示1条 ...

  5. Java坦克大战（四）

    这是我的坦克游戏大战的最后一版,里面添加很多新的功能.这个坦克大战的有很多不足之处,但是对于初学者来说依然是一个很好的练习项目,从中我们可以学习Java基础知识,将知识与项目结合,学习面向对象编程思想 ...

  6. 【IDEA&&Eclipse】2、从Eclipse转移到IntelliJ IDEA一点心得

    本人使用IntelliJ IDEA其实并不太久,用了这段时间以后,觉得的确很是好用.刚刚从Eclipse转过来的很多人开始可能不适应,我就把使用过程中的一些经验和常用功能分享下,当然在看这篇之前推荐你 ...

  7. 拜小白教你OpenCV3.2.0+VS2017开发环境配置

    第一部分:OpenCV3.2.0的下载 OpenCV官方下载地址: http://opencv.org/releases.html# 本人选择opencv3.2.0基于Windows平台.读者根据自己 ...

  8. CentOS 通过yum来升级php到php5.6，yum upgrade php 没有更新包

    在文章中,我们将展示在centOS系统下如何将php升级到5.6,之前通过yum来安装lamp环境,直接升级的话,提示没有更新包,也就是说默认情况下php5.3.3是最新 1.查看已经安装的php版本 ...

  9. rem与px之间的换算（移动端）

    最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...

  10. layer插件layer.photos()动态插入的图片无法正常显示

    layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...