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.

　　推荐阅读

　　onsubmit阻止form表单提交与onclick的相关操作

1. return 的返回值问题，函数中return一旦有返回值，就不在执行下面的语句，直接跳到函数调用的地方。如下PHP函数代码，第一个if条件符合则函数值返回布尔型false，可以返回一个函数的值,并且跳出这个函数；只要遇>>>详细阅读

本文标题：javascript中使用css需要注意的地方小结

地址：http://www.17bianji.com/kaifa2/JS/25765.html

 1/2    1