原生js提取非行间样式
js用style属性可以获得html标签的样式，但是不能获取非行间样式，如何获取css的非行间样式呢，在低版本ie我们可以用currentStyle，在其他浏览器我们可以用getComputedStyle。
1、ie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:200px;
height:200px;
background: skyblue;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
alert(box.currentStyle["width"]); //200px
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
2、其他浏览器
alert(getComputedStyle(box,false)["width"]); //200px
3、兼容
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
} window.onload=function(){
var box=document.getElementById("box");
alert(getStyle(box,"width")); //兼容ie及其他浏览器
}
</script>
4、获取及设置非行间样式
<script>
function getStyle(obj,attr,value){
if(arguments.length==2){ //根据参数个数执行相应操作
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}else{
obj.style[attr]=value; //这里需要注意，使用obj.style.attr无效
} } window.onload=function(){
var box=document.getElementById("box");
getStyle(box,"backgroundColor","yellowgreen"); //把盒子的背景颜色设置成黄绿色
alert(getStyle(box,"width")); //弹出盒子的宽度200px
}
</script>
原生js提取非行间样式的更多相关文章
- JS获取非行间样式
我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...
- js获取非行间样式/定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- JS获取非行间样式及兼容问题
获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js获取非行间样式或定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js获取非行间样式/写入样式（行间）
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js 获取非行间样式
1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...
- JS取非行间样式
<title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red;} < ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- js兼容总结之获取非行间样式
非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...
随机推荐
- ethereum(以太坊)(六)--整型(int)
pragma solidity ^0.4.20; /* uint8 uint16 ...uint256 int8 int16 int24 ..int256 uint => uint256 int ...
- xml中Node和Element的区别
本文转载自:http://blog.csdn.net/wcydiyi/article/details/4432636点击打开链接 1.元素(Element)和结点(Node)的区别: ...
- stat.h头文件，轻松获取文件属性
[以前还为了获取文件的长度,费劲从头读取一遍,一个一个字节的算. 做webserver时候,发现原来stat函数可以返回一个结构,里面包括文件的全部属性. 真是曲折啊.] #i nclude<s ...
- 判断移动端和pc端最简单的方法
<!DOCTYPE html><html><head> <title></title> <script type="text ...
- python基础之布尔运算、集合
布尔值 True 真 False 假 所有的数据类型都自带布尔值,数据只有在0,None和空的时候为False. print(bool()) print(bool()) print(bool('')) ...
- linux中jdk的安装与mysql 的安装
1.linux安装jdk #先找到 安装包#cd /usr/java tar -zxvf jdk-8u31-linux-x64.tar.gz 2.安装选择要安装java的位置,如/usr/目录下,新建 ...
- 云计算之路-阿里云上：OCS问题的进展以及11:30-11:50遇到的问题
(上图是今天出问题期间Web服务器性能监控图,紫色表示的是Request Execution Time) 昨天我们发布了一篇博客分享了我们这两天遇到的OCS(开放缓存服务)问题,详见云计算之路-阿里云 ...
- 《Cracking the Coding Interview》——第5章：位操作——题目7
2014-03-19 06:27 题目:有一个数组里包含了0~n中除了某个整数m之外的所有整数,你要设法找出这个m.限制条件为每次你只能用O(1)的时间访问第i个元素的第j位二进制位. 解法:0~n的 ...
- 命名空间“System.Web.Http”中不存在类型或命名空间名称“Description”(是否缺少程序集引用?)
solution: Set "Copy Local : True" in properties for References\System.Web.Http 在http://s ...
- 服务过美国总统竞选的非传统投票UI [解析及DEMO]
上篇文章和大家介绍了需求情况和难点分析,大家可以看这个链接了解详细 服务过美国总统竞选的非传统投票UI =================正文开始=================== ...