curcss
来源:互联网 发布:vmware mac版下载 编辑:程序博客网 时间:2024/04/30 05:23
在ie下面有3中获取样式的方法
elem.style
elem.currentStyle
elem.runtimeStyle
elem.stlye
指的是元素上面的样式
如
<div id="xx" style="height:200px"></div>
xx.style.height就是200px
但是
<style type="text/css">
.test{height:200px}
</style>
<div id="xx" class="text"></div>
是取不到值得
elem.currentStyle
获取元素的当前样式(优先级别高的样式)
<style type="text/css">
.test{height:200px}
</style>
<div id="xx" class="text" style="height:20px"></div>
alert(document.getElementById('xx').currentStyle.height)
elem.runtimeStyle
runtimeStyle简单的说就是你可以对一个节点的样式赋值,他将成为最高优先级的节点样式
当指定了runtimeStyle,那么当前显示的样式以runtimeStyle为准,如果取消了runtimeStyle,那么当前显示样式就恢复到currentStyle的样式
<style type="text/css">
.test{height:200px}
</style>
<s/head>
<body>
<div id='xx' style="height:20px;"></div>
<script type="text/javascript">
window.onload = function(){
var xx = document.getElementById("xx");
//xx.runtimeStyle.color="black";
alert(xx.currentStyle.height);
alert(xx.runtimeStyle.height);
alert(xx.style.height);
xx.runtimeStyle.height="30px";
alert(xx.currentStyle.height);
alert(xx.runtimeStyle.height);
alert(xx.style.height);
}
</script>
</body>
w3c获取样式的方法
document.defaultView.getComputedStyle
一个例子
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>attr</title>
<link href="manage.css" mce_href="manage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="xx" style="height:20px"></div>
<script type="text/javascript">
/*function swap(elem, options, callback){
var old = {};
// Remember the old values, and insert the new ones
for ( var name in options ) {
old[ name ] = elem.style[ name ];
elem.style[ name ] = options[ name ];
}
callback.call( elem );
// Revert the old values
for ( var name in options )
elem.style[ name ] = old[ name ];
}
function css( elem, name, force, extra ){
if( name == "width" || name == "height" ){
var val,
props = { position: "absolute", visibility: "hidden", display:"block" },
which = name == "width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ];
function getWH() {
val = name == "width" ? elem.offsetWidth : elem.offsetHeight;
if ( extra === "border" )
return;
jQuery.each( which, function() {
if ( !extra )
val -= parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0;
if ( extra === "margin" )
val += parseFloat(jQuery.curCSS( elem, "margin" + this, true)) || 0;
else
val -= parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0;
});
if ( elem.offsetWidth !== 0 )
getWH();
else
jQuery.swap( elem, props, getWH );
return Math.max(0, Math.round(val));
}
}
return jQuery.curCSS( elem, name, force );
}*/
function curCSS(elem, name, force){
var ret, style = elem.style;
/*if ( name == "opacity" && !jQuery.support.opacity ) {
ret = jQuery.attr( style, "opacity" );
return ret == "" ?
"1" :
ret;
}*/
if ( name.match( /float/i ) )
name = !-[1,]? "cssFloat" : "styleFloat";
//如果在元素的style上 就从style上面取
if ( !force && style && style[ name ] ){
ret = style[ name ];
}else if(document.defaultView.getComputedStyle){
// Only "float" is needed here
if ( name.match( /float/i ) )
name = "float";
//将大写字母转成 一杠加以个小写字母 A ===> -a
name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
var computedStyle = document.defaultView.getComputedStyle( elem, null );
if(computedStyle)
ret = computedStyle.getPropertyValue( name );
if ( name == "opacity" && ret == "" )
ret = "1";
}else if ( elem.currentStyle ) {
var camelCase = name.replace(/\-(\w)/g, function(all, letter){
return letter.toUpperCase();
});
ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
// Remember the original values
var left = style.left, rsLeft = elem.runtimeStyle.left;
// Put in the new values to get a computed value out
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px";
// Revert the changed values
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
}
return ret;
}
window.onload = function(){
var div = document.getElementById('xx')
alert(curCSS(div,'height'));
alert(curCSS(div,'width'));
}
</script>
</body>
</html>