源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

javascript中使用css需要注意的地方小结

  • 时间:2021-01-23 03:49 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript中使用css需要注意的地方小结
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下可以:
[u]复制代码[/u] 代码如下:
var heading = document.getElementById("heading"); var computedStyle = document.defaultView.getComputedStyle(heading,null); var computedFontFamily = computedStyle.fontFamily;//sans-serif
IE不支持使用DOM标准方法,可以:
[u]复制代码[/u] 代码如下:
var heading = document.getElementById("heading"); var computedFontFamily = heading.currentStyle.fontFamily;//sans-serif
综合上述这些方法,可以创建一个跨浏览器函数来实现
[u]复制代码[/u] 代码如下:
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]; }
对照表 [h1]CSS Properties To JavaScript Reference Conversion[/h1]
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
[h1]Usage[/h1] [h2]Internet Explorer[/h2] document.all.[i]div_id[/i].style.[i]JS_property_reference[/i] = [i]"new_CSS_property_value"[/i]; [h2]Older Netscape's (4.7 and earlier)[/h2] document.[i]div_id[/i].[i]JS_property_reference[/i] = [i]"new_CSS_property_value"[/i]; [h2]Netscape 6.0+ and Opera (and other Mozilla)[/h2] document.getElementById([i]div_id[/i]).style.[i]JS_property_reference[/i] = [i]"new_CSS_property_value"[/i]; Note the use of parentheses instead of square brackets in newer Mozilla's "getElementById()" reference.
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部