W3C DOM2样式规范
现在这边贴出本章要的源代码，注意要结合前面用到的ADS库http://vdisk.weibo.com/s/Dq8NU
当DOM脚本遇到样式
我们最终的标记应该是：
CSS图像替换经典技术为FIR
<h2 id="advancedHeader"><span>Advanced DOM Scripting</span></h2>
/* 为父元素添加背景图像*/
#advancedHeader {
border: 0; padding: 0; /* remove styleing from other style sheets */
height:60px;
background: transparent url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;
}
/* 隐藏文本 */
#advancedHeader span {
display:none;
}
但是这种方法存在两个问题：
Dwyer方法（使用0尺寸的附加span标签，但是它在CSS有效而凸显禁用的情况下仍然不具有可访问性）
/* 为父元素添加背景图像*/
#advancedHeader {
border: 0; padding: 0; /* remove styleing from other style sheets */
height:60px;
background: transparent url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;
}
/*使用0尺寸的盒子隐藏文本*/
#advancedHeader span {
display:block;
width:0;
height:0;
overflow:hidden;
}
Phark方法（不需要额外的标签，而是使用负文本缩进来隐藏内容， 但是这种方法在CSS有效而图像被禁用的情况下还是会损坏可访问性）
/* 使用背景图像和负文本缩进隐藏文本 */
#advancedHeader {
border: 0; padding: 0; /* remove styleing from other style sheets */
text-indent: -100em;
overflow:hidden;
height:60px;
background: transparent url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;
}
应外一种方法Shea方法仍然附加了<span>
<h2 id="advancedHeader" title="Advanced DOM Scripting">
<span></span>Advanced DOM Scripting
</h2>
但是这个方法没有隐藏文本，而是将带有实心不透明的背景图像的<span>元素，定位在了文本的上方，从而达到了遮盖文本的目的
/*父元素使用想对定位，子元素使用绝对定位*/
#advancedHeader {
border: 0; padding: 0; /* remove styleing from other style sheets */
height:60px;
position:relative;
}
/* 通过在绝对定位的span元素上使用不同命的毕竟隐藏文本 */
#advancedHeader span {
background: transparent url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;
display:block;
width:100%;
height:100%;
position:absolute;
}
/*图像被禁用的情况下为文本添加的样式 */
#advancedHeader {
color: #1A5B9D;
}
/* 根据图像设置标题的大小*/
#advancedHeader.advancED {
border:0; padding: 0;
height:60px;
position:relative;
overflow:hidden;
}
/* 使用不透明图像隐藏文本*/
#advancedHeader.advancED span {
background: white url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;
display:block;
width:100%;
height:100%;
position:absolute;
}
为了让页面更加有吸引力，在load事件会向标题元素加入额外的<span>标签，以及额外的.advanceED类名：
ADS.addEvent(window, ‘load‘, function() {
// 取得标题
var header = ADS.$(‘advancedHeader‘);
//创建图像元素
var image = document.createElement(‘IMG‘);
//当图像载入成功后在添加span和类名
ADS.addEvent(image, ‘load‘, function() {
var s = document.createElement(‘SPAN‘);
// 将span添加为标题的子元素
ADS.prependChild(header,s);
// 创建必要的title属性
if(!header.getAttribute(‘title‘)) {
var i, child;
var title = ‘‘;
//循环遍历子元素以组合title属性
for(i=0 ; child = header.childNodes[i] ; i++ ) {
if(child.nodeValue) title += child.nodeValue;
}
header.setAttribute(‘title‘,title);
}
// 修改类名称以标明变更并应用CSS
header.className = ‘advancED‘;
});
// 载入图像
// 这种硬编码的方式并不理想
// 本意后面还将讨论这点
image.src = ‘http://advancedDOMScripting.com/images/image-replace.png‘;
});
添加额外得累对于页面退化和保持整洁非常重要
另外说一句。其实本章我看的也是迷迷糊糊^ ^;
JavaScript DOM高级程序设计 5动态修改样式和层叠样式表1（源代码）--我要坚持到底！
原文：http://www.cnblogs.com/sunhan/p/3542396.html