获取元素计算后的css样式封装：

    function getCss(obj,attribute) {

        if(obj.currentStyle) {

            return obj.currentStyle[attribute];}else {

        return window.getComputedStyle(obj,null)[attribute];}

    }

案例：

<!DOCTYLE html>

<html>

<head>

    <meta charset="uft-8" />

    <style>

        #box {width:100px; height: 100px; background:#dfd; position:absolute; left:100px; top:100px;}

    </style>

</head>

<body>

<button id="btn1">200</button>

<button id="btn2">600</button>

<div id="box"></div>

</body>

</html>

<script>

    function getCss(obj,attribute) {

        if(obj.currentStyle) {

            return obj.currentStyle[attribute];}else {

        return window.getComputedStyle(obj,null)[attribute];}

    }

    console.log(getCss(box,'zIndex'));

</script>

获取元素计算后的css样式封装的更多相关文章

  1. 前端笔记之JavaScript（八）关于元素&计算后的样式

    一.获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: docu ...

  2. 获取元素计算样式getComputedStyle（）与currentStyle

    window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值. 私有的CSS属性值可以通过对 ...

  3. JS获取元素计算过后的样式

    获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = wi ...

  4. JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数

    获取计算后的样式属性----获取一个元素任意一个样式属性值 获取元素距离左边位置的值 会有如下兼容性问题: my$("btn").onclick = function () { / ...

  5. 关于获取、设置css样式封装的函数入门版

    <html> <head> <meta charset="UTF-8"> <title>CSS样式的获取和设置:简单版</ti ...

  6. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  7. html5shiv主要解决IE6-8 无法识别HTML5的新标签，父节点不能包裹子元素，以及应用CSS样式

    html5shivehtml5shiv主要IE6-8解决:1,HTML5提出的新的元素不被IE6-8识别.2,这些新元素不能作为父节点包裹子元素,3,并且不能应用CSS样式.让CSS 样式应用在未知元 ...

  8. js获取css样式封装

    封装 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(ob ...

  9. vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

随机推荐

  1. Android Studio使用Git版本控制工具

    1.File->Settings->Version Control->git 将git.exe地址copy进去 2.File->Settings->Version Con ...

  2. vtk多线程简单测试

    vtkMultithreader is a class that provides support for multithreaded execution using sproc() on an SG ...

  3. SQL Sever无法打开链接对话框，未将对象引用设置到对象的实例。（AppIDPackage）

    前几天刚做完系统,先装的是SQL Sever2008,装完后还试了一下,OK~没问题,然后就继续装VS2012等一些软件.搞到很晚没有继续试试就睡了,第二天运行SSMS出问题了..(如图 1.0 所示 ...

  4. Unity3D性能优化

    一.美术资源优化   1.动态物体,角色.怪物.NPC (1)控制面的数量,300-2000个 (2)控制Skinner Mesh Renderer的数量,1个 (3)控制材质数量,1-3个 (4)控 ...

  5. 1、SQL Server自动化运维 - 备份(一)业务数据库

    为了能够恢复数据,数据库运维基础就是备份,备份自动化也是运维自动化首要进行的. 笔者的备份自动化,通过配置表快速配置为前提,同时记录备份过程,尽可能的减少人工操作.首先将SQL Server备份按用途 ...

  6. 【转载】--仅用 []()+! 就足以实现几乎任意Javascript代码

    最近在做CTF的题目,遇见了一个都是[]()+!这样的文件,于是百度了一下,发现这个博客对这个有解释. G Reader里Dexter同学的分享,来自sla.ckers.org的又一神作 点我测试 G ...

  7. 安卓app开发笔记

    移动app应用开发也是信息技术课程科技创新的范畴,所以在个人开发app时候记录一些笔记,可能会很乱,所以选择按点来写. 首先是一些入门的资料,有很多需要自己学习的 https://www.oschin ...

  8. paintEvent(QPaintEvent*)是系统自动调用的

    qt中函数paintEvent(QPaintEvent*)是被系统自动调用. paintEvent(QPaintEvent *)函数是QWidget类中的虚函数,用于ui的绘制,会在多种情况下被其他函 ...

  9. iOS-最全的App上架教程

    App上架教程 心情有没有好一点 在上架App之前想要 真机测试的同学 请查看iOS- 最全的真机测试教程 里面包含怎么让多台电脑同时 上架App和同时真机调试.P12文件的使用详解 因为最近更新了X ...

  10. 如何在Linux上使用文件作为内存交换区(Swap Area)

    交换区域(Swap Area)有什么作用? 交换分区是操作系统在内存不足(或内存较低)时的一种补充.通俗的说,如果说内存是汽油,内存条就相当于油箱,交换区域则相当于备用油箱. Ubuntu Linux ...