javascript获取行间样式和非行间样式--兼容写法

style:获取行间样式;

currentStyle:获取计算后的样式,也叫当前样式、最终样式。


优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到。
注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等。

alert (oAbc.currentStyle);
IE8和Opera 11弹出了“object CSSStyleDeclaration”;FF 12、chrome 14、safari 5则弹出“undefined”。

var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
        //IE、Opera
        alert("我支持currentStyle");
} else {
        //FF、chrome、safari
        alert("我不支持currentStyle");
}

其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。

getComputedStyle(obj,false):在FF新版本中只需要第一个参数,即操作对象,第二个参数写“false”也是大家通用的写法,目的是为了兼容老版本的火狐浏览器。

兼容写法:

var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
        //IE、Opera
        //alert("我支持currentStyle");
        alert(oAbc.currentStyle.width);
} else {
        //FF、chrome、safari
        //alert("我不支持currentStyle");
        alert(getComputedStyle(oAbc,false).width);
}

时间: 2024-08-05 06:32:07

javascript获取行间样式和非行间样式--兼容写法的相关文章

JavaScript 学习—— js获取行间样式和非行间样式

1. 问题引入 <head> <style> #div1{ width:150px; height:200px; position:absolute; left:-150px; background: green; } </style> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); alert(oDiv1.style.left); //获取l

js用currentStyle和getComputedStyle获取css样式(非行间) 兼容ie与火狐

用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle.下面是js代码. function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name];

javascript 行间样式与非行间样式获取方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .style001 {width: 300px;height: 300px;margin: 20px;padding: 30px;border: 20px gr

javascript获取鼠标点击位置的坐标兼容写法

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>获取鼠标点击位置</title> 6 <script> //考虑浏览器滚动条 7 function getMousePos(event) { 8 var e = event || window.event; 9 var scr

JS获取非行间样式

我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? 首先让我们看一下js是如何获取行间样式的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

JavaScript获取非行间样式/定义样式

html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="stylesheet" href="css/style.css" type="text/css"> style标签内:<style> width:100px; </style> (3)行间样式(节点style属性定义的样式)比如:<div

获取非行间样式,数组

1.用style来获取的是行间样式,若是要获取非行间样式,则要采用currenStyle,getComputedStyle.在用参数的时候要用[]这个来框出来,不能用. 2.getComputedStyle(obj,false)[name]这个false可以换成别的,null也行.换成nul就报错. 3.alert(getStyle(oDiv, 'background'));这里获取的background 是一个复合的样式.这个地方如果是要获取'width'不能直接用width. 在函数传参的时

js获取非行间样式或定义样式

1 <!--DOCTYPE html--> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <style> 6 *{ text-align:center;} 7 input{ margin-top:30px; padding:10px 20px;} 8 #div1{ width:500px; height:300px; background:red; margin:10px aut

获取非行间样式的方法

了解css三种写入样式的方法 1. 内联: 写在style标签内 1 <style> 2 div { 3 width: 300px; 4 height: 300px; 5 border-width: 1px; 6 border-style: solid; 7 border-color: black; 8 background-color: pink; 9 } 10 </style> 2. 外联: 使用link标签导入 1 <link rel="stylesheet&