样式表有三种方式
内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。
内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。
外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。
解决方案:引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的!
runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top
要兼容FF,就得需要getComputedStyle 出马了
注意: getComputedStyle是firefox中的, currentStyle是ie中的. 比如说
1
2
3
4
5
|
<style>
#mydiv {
width : 300px ;
}
</style>
|
则:
1
2
3
4
5
6
7
8
|
var mydiv = document.getElementById( 'mydiv' );
if (mydiv.currentStyle) {
var width = mydiv.currentStyle[ 'width' ];
alert( 'ie:' + width);
} else if (window.getComputedStyle) {
var width = window.getComputedStyle(mydiv , null )[ 'width' ];
alert( 'firefox:' + width);
}
|
另外在FF下还可以通过下面的方式获取
1
2
|
document.defaultView.getComputedStyle(mydiv, null ).width;
window.getComputedStyle(mydiv , null ).width;
|
相关推荐
主要介绍了前端学习笔记style,currentStyle,getComputedStyle的用法与区别,需要的朋友可以参考下
样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。 内部样式(internal Style Sheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效。 ...
大家都知道,用document.getElementById(‘element’).style.xxx可以获取元素的...但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DO
CSS的样式分为三类: ...getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration]) currentStyle是IE浏览器的一个属性,返回的是CSS样式对象 el
Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div xss=removed>hello),可以直接使用element.style.color来直接获取css属性的值; 2. 但是对于外部定义的css样式使用...
//获取元素的真实的,最终的CSS样式属性值的函数 function getStyle(elem,name){ if(elem.style[name]){ return elem.style[name]; }else if(elem.currentStyle){ return elem.currentStyle[name]; }else if...
function getStyle(elem,name){ if(elem.style[name]){ return elem.style[name]; }else if(elem.currentStyle){ return elem.currentStyle[name]; }else if(document.defaultView&&document.defaultView....
js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设置为了兼容IE这孙子; function...
elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准...
window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //动画函数 obj---要执行动画的对象 json---要执行到的目标的参数对象 fn为执行完成后的回调函数(可以再次调用此方法按照...
前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题。不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一...getComputedStyle 与 currentStyle; obj.naturalWidth(nat
如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property];... else if (document.defaultView && document.defaultView.getComputedStyle) { var
上面用到了parentNode,这里顺便说说它跟offsetParent,parentElement的区别。 先看看parentNode在w3c的说明: The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a ...
} function getStyle(obj,styleName) { if(obj.currentStyle) //for ies { return obj.currentStyle[styleName]; //注意获取方式 } else //for others { return document.defaultView.getComputedStyle(obj,null)....
代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById... } //ff else { var style = document.defaultView.getComputedStyle(obj,null); return style[name]; } } Hide函数: 代码如
eclipse-testng 离线包 ... indent="yes" omit-xml-declaration="yes" doctype-public="-//W3C//DTD XHTML 1.0 ... return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop); } } ...
obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute];} 还有一种可以获取写在html中的style属性的 代码如下:document.getElementById(“elementId”).s