JavaScript DOM高级程序设计 5动态修改样式和层叠样式表1(源代码)--我要坚持到底!

W3C DOM2样式规范

现在这边贴出本章要的源代码,注意要结合前面用到的ADS库http://vdisk.weibo.com/s/Dq8NU

  • CSSStyleSheet对象属性:
  1. type :始终是txt/css
  2. disabled:是否被禁用
  3. href URL
  4. title :分组样式表的标签
  5. media:样式表应用的目标设备类型,如screen、print
  6. ownerRule : 制度的CSSRule对象,如果样式表是使用@import等类似方式导入的,该属性即表示其父规则
  7. inserRule(rule,index): 用于添加新的样式声明
  8. deleteRule(index):从演示表中移出规则
  • CSSStyleRule对象属性:
  1. type 继承自CSSRule对象的一个属性
  2. cssText
  3. parentStyleSheet
  4. parentRule
  5. selectorText
  6. style
  • CSSStyleDeclaration对象属性:
  1. cssText
  2. parentRule
  3. getPropertyValue
  4. removeProperty(propertyName)
  5. removeProperty(propertyName)
  6. setProperty(propertyName,value,priorty)

当DOM脚本遇到样式

  • 为应用样式而改动标记

我们最终的标记应该是:

  1. 对屏幕阅读器而言是可访问的
  2. 当禁用图像而CSS有效时是可以理解的
  3. 维护与访问性相关的特性,如alt和title属性。
  4. 避免使用不必要的标记--如果可能的话

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;
}

但是这种方法存在两个问题:

  1. 如果禁用图像,则什么都不会显示,因为span仍旧被隐藏着
  2. display:none属性会对支持CSS的屏幕阅读器隐藏内容,从而完全破坏了推昂替换中的可访问性原则

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‘;

});

添加额外得累对于页面退化和保持整洁非常重要

另外说一句。其实本章我看的也是迷迷糊糊^ ^;

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。