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属性里面; 这里我们就需要: 下面这个代码主要是设 ...
随机推荐
- 倒计时48小时|2018GIAC上海站参会攻略来了！
再过一天,令大家期待已久的GIAC全球互联网架构大会将登陆魔都与众位架构师.技术负责人及高端技术从业人员见面! 这场策划许久的技术盛宴,我们邀请到了腾讯.阿里.京东.美团.keep.UC.360.网商 ...
- 如何在Ubuntu上安装腾讯QQ
首先QQ国际版下载连接:http://pan.baidu.com/s/1sj7i6BF 安装步骤: 一:安装依赖库 在终端输入:sudo apt-get install libgtk2.0-0:i3 ...
- Gym 101873G - Water Testing - [皮克定理]
题目链接:http://codeforces.com/gym/101873/problem/G 题意: 在点阵上,给出 $N$ 个点的坐标(全部都是在格点上),将它们按顺序连接可以构成一个多边形,求该 ...
- P5280 [ZJOI2019]线段树
题目链接:洛谷 题目描述:[比较复杂,建议看原题] 这道题太神仙了,线段树上做树形dp. 根据树形dp的套路,都是按照转移的不同情况给节点分类.这里每次modify的时候对于节点的影响也不同,所以我们 ...
- 关于systemctl
systemctl是CentOS7的服务管理工具中主要的工具,它融合之前service和chkconfig的功能于一体. 启动一个服务:systemctl start firewalld.servic ...
- 扩容Linux文件系统
扩容Linux文件系统 腾讯云 云硬盘扩容 https://cloud.tencent.com/product/cbs https://cloud.tencent.com/document/produ ...
- python框架之Flask(1)-Flask初使用
Flask是一个基于 Python 开发并且依赖 jinja2 模板和 Werkzeug WSGI 服务的一个微型框架,对于 Werkzeug 本质是 Socket 服务端,其用于接收 http 请求 ...
- #WEB安全基础 : HTTP协议 | 0x3 TCP三次握手和DNS服务
TCP三次握手精准无误地把数据送达目标处,TCP协议把数据包送出去后,向对方确认是否成功发送,握手过程中使用了TCP的标志(flag)——SYN和ACK 请看图 若握手中断,TCP协议再次从同样顺序发 ...
- 安装archlinux的linux命令记录
磁盘的分区:cfdisk 格式化分区:mkfs.ext4,mkswap,swapon 查看所有分区:lsblk /dev/sda 先挂载 / 分区:mount /dev/sda1 /mnt archl ...
- html5 javascript 事件练习3随机键盘
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...