获取元素计算后的css样式封装
获取元素计算后的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样式封装的更多相关文章
- 前端笔记之JavaScript（八）关于元素&计算后的样式
一.获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: docu ...
- 获取元素计算样式getComputedStyle（）与currentStyle
window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值. 私有的CSS属性值可以通过对 ...
- JS获取元素计算过后的样式
获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = wi ...
- JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数
获取计算后的样式属性----获取一个元素任意一个样式属性值 获取元素距离左边位置的值 会有如下兼容性问题: my$("btn").onclick = function () { / ...
- 关于获取、设置css样式封装的函数入门版
<html> <head> <meta charset="UTF-8"> <title>CSS样式的获取和设置:简单版</ti ...
- JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别
整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...
- html5shiv主要解决IE6-8 无法识别HTML5的新标签，父节点不能包裹子元素，以及应用CSS样式
html5shivehtml5shiv主要IE6-8解决:1,HTML5提出的新的元素不被IE6-8识别.2,这些新元素不能作为父节点包裹子元素,3,并且不能应用CSS样式.让CSS 样式应用在未知元 ...
- js获取css样式封装
封装 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(ob ...
- vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...
随机推荐
- Android之ListView性能优化——使用ConvertView和ViewHolder
使用ConvertView和ViewHolder的优化是针对ListView的Adapter(BaseAdapter)的.这种优化的优点如下: 1)重用了ConveertView,在很大程度上减少了内 ...
- 《深入理解Java虚拟机》学习笔记1-内存数据区域
1.程序计数器 作用-较小的内存空间,用于存储当前线程所执行的字节码的行号 特性-每条线程有需要一个独立的程序计数器,各线程间互不影响,独立存储,称为"线程私有"的内存 ...
- CJCMS系列--持久层对MangoDB的支持
持久层添加对MangoDB数据库的支持 using System; using System.Collections.Generic; using System.Linq; using System. ...
- YII 错误 SQLSTATE[HY000] [2002] No such file or directory
在使用yii的yii\db\Connnection时发生错误 <?php namespace app\controllers; use yii\web\Controller; use yii\d ...
- 在布局文件中使用Fragment的步骤
为了在Activity布局文件中使用Fragment我们需要四个步骤. 1.定义一个Activity,他继承android.support.v4.app.FragmentActivity,下面是关键代 ...
- ip地址转换
通常,我们用点分十进制字符串表示ipv4地址(192.168.1.1),用十六进制字符串表示ipv6地址(fe80::20c:29ff:fee9:4bcc). ipv4转换函数 #include &l ...
- JS验证只能输入数字，数字和字母等的正则表达式
JS判断只能是数字和小数点 0.不能输入中文1)<input onpaste="return false;" type="text" name=" ...
- BeanUtils.populate(obj, map);
public static void populate(Object bean, Map<String, ? extends Object> properties) throws Ille ...
- ServiceStack.Redis订阅发布服务的调用（Z）
1.Redis订阅发布介绍Redis订阅发布是一种消息通信模式:发布者(publisher)发送消息,订阅者(Subscriber)接受消息.类似于设计模式中的观察者模式.发布者和订阅者之间使用频 ...
- MAC OS PHP
Apache与PHP的配置 OSX自带了apache和php,但默认情况下没有开启,打开终端 sudo apachectl start 这时在浏览器中输入localhost应该就会出现apache标准 ...