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.

标签:
javascript,用css

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“javascript中使用css需要注意的地方小结”

暂无“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%。