js获取css样式封装
封装
function getStyle(obj , attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐
};
效果如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
margin: 50px auto;
width: 300px;
height: 250px;
color: #fff;
background:#70aa39;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oBox = document.getElementById("box"),
oW = parseFloat(getStyle(oBox , "width")),
oH = parseFloat(getStyle(oBox , "height"));
oBox.innerHTML = "宽:"+oW+"px"+"<br/>"+"高:"+oH+"px";
//封装
function getStyle(obj , attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐
};
</script>
</body>
</html>
js获取css样式封装的更多相关文章
- js获取css样式方法
一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: ...
- JS获取最终样式
在使用jqery时,操作什么都很方便,比如获取CSS样式,直接.css加样式名就可以获取你要的,但是JS,就麻烦点,因为有兼容问题,要做兼容,而jqery都是做好了的, 下面就是使用JS获取CSS样式 ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
- js 设置 获取css样式
先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...
- js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法
用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- js用currentStyle和getComputedStyle获取css样式（非行间） 兼容ie与火狐
用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...
- js获取css的各种样式并且设置他们
js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设 ...
随机推荐
- xilink 烧写flash
no 右键
- nexus2 配置
<?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...
- [dpdk][hotplug] DPDK网卡设备热插拔
dpdk pci网卡设备的热插拔. 样例程序如下: ... ... static int driverctl(char* pci) { int pid; pid = fork(); ) { execl ...
- 16.0-uC/OS-III同步
同步 uC/OS-III中用于同步的两种机制:信号量和事件标志组 . 1.信号量 信号量最初用于控制共享资源的访问.信号量可用于ISR与任务间.任务与任务间的同步. “ N”表示信号量可以被累计.初始 ...
- MySQL5.7 虚拟列实现表达式或函数索引
MySQL5.7 虚拟列实现表达式或函数索引 http://www.linuxidc.com/Linux/2015-11/125162.htm https://dev.mysql.com/doc/re ...
- 利用django-crontab设定定时任务
Django中想要设定定时任务的方法有很多,如celery.apscheduler.crontab等等,本文用crontab来实现. 想用apscheduler实现请看本人另一篇博客:使用APSche ...
- C#基础加强(3)之值、引用类型及结构体
值.引用类型 介绍 引用类型派生自 System.Object ,而值类型均隐式派生自 System.ValueType . 其实 System.ValueType 也是继承自 System.Obje ...
- 【JVM】-NO.113.JVM.1 -【JDK11 HashMap详解-0-全局-put】
Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...
- 把spring boot发布成window Service
一:下载Winsw, 把下载后的文件名改为你的应用如doctor.exe 二:添加xml <service> <id>doctor-api-service</id> ...
- Unicode编码学习
unicode基础知识 简单来说,** unicode 是字符集,utf-8,utf-16,utf-32是编码规则.** unicode 字符集: ttps://unicode-table.com/ ...