2.在使用“float”时,因为“float”是javascript的一个保留字,所以就不能使用style.float,而改成了style.cssFloat(IE使用的是style.styleFloat);
3. 获得元素的计算样式:
在W3C DOM下可以:
复制代码 代码如下:
var heading = document.getElementById("heading");
var computedStyle = document.defaultView.getComputedStyle(heading,null);
var computedFontFamily = computedStyle.fontFamily;//sans-serif
IE不支持使用DOM标准方法,可以:
复制代码 代码如下:
var heading = document.getElementById("heading");
var computedFontFamily = heading.currentStyle.fontFamily;//sans-serif
综合上述这些方法,可以创建一个跨浏览器函数来实现
复制代码 代码如下:
function retrieveComputedStyle(element,styleProperty){
var computedStyle = null;
if(typeof element.currentStyle != "undefined"){
computedStyle = element.currentStyle;
}else{
computedStyle = document.defaultView.getComputedStyle(element,null);
}
return computedStyle[styleProperty];
}
对照表
CSS Properties To JavaScript Reference Conversion
CSS Property JavaScript Reference backgroundbackgroundbackground-attachmentbackgroundAttachmentbackground-colorbackgroundColorbackground-imagebackgroundImagebackground-positionbackgroundPositionbackground-repeatbackgroundRepeatborderborderborder-bottomborderBottomborder-bottom-colorborderBottomColorborder-bottom-styleborderBottomStyleborder-bottom-widthborderBottomWidthborder-colorborderColorborder-leftborderLeftborder-left-colorborderLeftColorborder-left-styleborderLeftStyleborder-left-widthborderLeftWidthborder-rightborderRightborder-right-colorborderRightColorborder-right-styleborderRightStyleborder-right-widthborderRightWidthborder-styleborderStyleborder-topborderTopborder-top-colorborderTopColorborder-top-styleborderTopStyleborder-top-widthborderTopWidthborder-widthborderWidthclearclearclipclipcolorcolorcursorcursordisplaydisplayfilterfilterfontfontfont-familyfontFamilyfont-sizefontSizefont-variantfontVariantfont-weightfontWeightheightheightleftleftletter-spacingletterSpacingline-heightlineHeightlist-stylelistStylelist-style-imagelistStyleImagelist-style-positionlistStylePositionlist-style-typelistStyleTypemarginmarginmargin-bottommarginBottommargin-leftmarginLeftmargin-rightmarginRightmargin-topmarginTopoverflowoverflowpaddingpaddingpadding-bottompaddingBottompadding-leftpaddingLeftpadding-rightpaddingRightpadding-toppaddingToppage-break-afterpageBreakAfterpage-break-beforepageBreakBeforepositionpositionfloatstyleFloattext-aligntextAligntext-decorationtextDecorationtext-decoration: blinktextDecorationBlinktext-decoration: line-throughtextDecorationLineThroughtext-decoration: nonetextDecorationNonetext-decoration: overlinetextDecorationOverlinetext-decoration: underlinetextDecorationUnderlinetext-indenttextIndenttext-transformtextTransformtoptopvertical-alignverticalAlignvisibilityvisibilitywidthwidthz-indexzIndexUsage
Internet Explorer
document.all.div_id.style.JS_property_reference = "new_CSS_property_value";
Older Netscape's (4.7 and earlier)
document.div_id.JS_property_reference = "new_CSS_property_value";
Netscape 6.0+ and Opera (and other Mozilla)
document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";
Note the use of parentheses instead of square brackets in newer Mozilla's "getElementById()" reference.