JavaScript DOM高级程序设计 5动态修改样式和层叠样式表1,源代码--我要坚持到底!
W3C DOM2样式规范
现在这边贴出本章要的源代码,注意要结合前面用到的ADS库http://vdisk.weibo.com/s/Dq8NU
- CSSStyleSheet对象属性:
- type :始终是txt/css
- disabled:是否被禁用
- href URL
- title :分组样式表的标签
- media:样式表应用的目标设备类型,如screen、print
- ownerRule : 制度的CSSRule对象,如果样式表是使用@import等类似方式导入的,该属性即表示其父规则
- inserRule(rule,index): 用于添加新的样式声明
- deleteRule(index):从演示表中移出规则
- CSSStyleRule对象属性:
- type 继承自CSSRule对象的一个属性
- cssText
- parentStyleSheet
- parentRule
- selectorText
- style
- CSSStyleDeclaration对象属性:
- cssText
- parentRule
- getPropertyValue
- removeProperty(propertyName)
- removeProperty(propertyName)
- setProperty(propertyName,value,priorty)
当DOM脚本遇到样式
- 为应用样式而改动标记
我们最终的标记应该是:
- 对屏幕阅读器而言是可访问的
- 当禁用图像而CSS有效时是可以理解的
- 维护与访问性相关的特性,如alt和title属性。
- 避免使用不必要的标记--如果可能的话
CSS图像替换经典技术为FIR
<h2 ><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; }
但是这种方法存在两个问题:
- 如果禁用图像,则什么都不会显示,因为span仍旧被隐藏着
- 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 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面向对象编程实战
- 下一篇 »JavaScript深入之参数按值传递