DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript中使用css需要注意的地方小結
javascript中使用css需要注意的地方小結
編輯:關於JavaScript     
1.在改變單個元素樣式時,注意style對象的語法和css中使用的語法幾乎是一一對應的。不過包含連字符的屬性則被替換為一種“camel castring”的形式,例如:font-size現在成了fontSize,而margin-top變成了marginTop;
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 background background background-attachment backgroundAttachment background-color backgroundColor background-image backgroundImage background-position backgroundPosition background-repeat backgroundRepeat border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft border-left-color borderLeftColor border-left-style borderLeftStyle border-left-width borderLeftWidth border-right borderRight border-right-color borderRightColor border-right-style borderRightStyle border-right-width borderRightWidth border-style borderStyle border-top borderTop border-top-color borderTopColor border-top-style borderTopStyle border-top-width borderTopWidth border-width borderWidth clear clear clip clip color color cursor cursor display display filter filter font font font-family fontFamily font-size fontSize font-variant fontVariant font-weight fontWeight height height left left letter-spacing letterSpacing line-height lineHeight list-style listStyle list-style-image listStyleImage list-style-position listStylePosition list-style-type listStyleType margin margin margin-bottom marginBottom margin-left marginLeft margin-right marginRight margin-top marginTop overflow overflow padding padding padding-bottom paddingBottom padding-left paddingLeft padding-right paddingRight padding-top paddingTop page-break-after pageBreakAfter page-break-before pageBreakBefore position position float styleFloat text-align textAlign text-decoration textDecoration text-decoration: blink textDecorationBlink text-decoration: line-through textDecorationLineThrough text-decoration: none textDecorationNone text-decoration: overline textDecorationOverline text-decoration: underline textDecorationUnderline text-indent textIndent text-transform textTransform top top vertical-align verticalAlign visibility visibility width width z-index zIndex

Usage

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.

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved