当前位置:编程学习 > JS >>

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下可以:
复制代码 代码如下:

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

上一个:原生javascript实现图片轮播效果代码
下一个:IE6不能修改NAME问题的解决方法

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,