网站设计通过CSS类名切换来修改DOM
作者： 日期：2012-09-19 点击：
这个方案让我们可以一次性修改一个元素和它的子元素的多个样式属性而只触发一次重解析。
需求：
我们现在需要写一个函数来修改一个超链接的几个样式规则。网站设计要实现很简单，把这几个规则对应的属性逐一改了就好了。但是带来的问题是，每修改一个样式 属性，都会导致一次页面的重解析。
function selectAnchor(element) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}
解决方案：
要解决这个问题，我们可以先创建一个样式名，并且把要修改的样式规则都放到这个类名上，然后我们给超链接添加上这个新类名，就可以实现添加几个样式 规则而只触发一次重解析了。这个模式还有个好处是也实现了表现和逻辑相分离。
.selectedAnchor {
font-weight: bold;
text-decoration: none;
color: #000;
}
function selectAnchor(element) {
element.className = 'selectedAnchor';
}
收藏 推荐 打印 | 录入：莹莹 阅读：32 次
学习网页设计步
上一篇：学网页设计之网页宽度自动调整
下一篇：[2010版] 网易博客文章列表采集方法，php接口实现通用采集