js修改htmlclass属性，关于JS动态修改CSS样式问题（class和
style）
有时我们需要动态⽣成效果，那么就需要对页⾯的css进⾏各种处理，进⽽达到⼀些样式的改变。如动画，拖放等效果。所以使⽤JS正确的来对页⾯样式修改是灰常重要的。
修改标签的class属性值
直接在css中定义多种css类型 然后在事件中对DOM对象的class属性进⾏切换，是最简单可⾏的⼀种⽅式。也是⽬前使⽤最多的⽅法。此⽅法会覆盖对象原有的class属性
⾮标准ECMAScript来进⾏修改其class的值。
还有就是使⽤ES标准来进⾏修改，就是使⽤DOM的setAttribute⽅法。但是他有⼀个兼容性问题。
var obj = ElementById("div");
obj.setAttribute("className","otherclass");//IE下使⽤className
obj.setAttribute("class","otherclass");//FF下的⽅式 所以要注意
setAttribute()对id同样适⽤。
##添加⾏内样式
cssclass属性直接使⽤ dom_obj.style.*** = "***"; 来进⾏对其样式的覆盖。由于⾏内样式优先级最⾼，所以能覆盖其他节点的样式。
该⽅法也是极为常⽤的，唯⼀需要注意的就是对于样式名的⼤⼩写问题。如：border-left 应该为 borderLeft 。
使⽤该⽅法我们可能需要⽤到计算当前样式值的⽅法。这⾥也具有兼容性问题。currentStyle只有IE⽀持。取得当前应⽤的样getComputedStyle⽀持FF，Opera，Safari，Chrome等浏览器。取得最终应⽤的样式。
var obj = ElementById("div");
objh=ComputedStyle(obj,null).height;
//或者
ComputedStyle(obj,null)[height];
//IE下 需要
objh=obj.currentStyle[height];
解决兼容性的⽅法
function getStyle(element,property) {
var value = element.style[camelize(property)];
if(!value) {
if(document.defaultView && ComputedStyle) {
value = ComputedStyle(element).getPropertyValue(property);
} else if(element.currentStyle) {
value = element.currentStyle[camelize(property)];
}
}
return value; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。