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 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
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
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.
标签:
javascript,用css
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“javascript中使用css需要注意的地方小结”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。