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 id="advancedHeader"><span>Advanced DOM Scripting</span></h2>
/* 为父元素添加背景图像*/
#advancedHeader {
border:; padding:; /* 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:; padding:; /* 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:;
height:;
overflow:hidden;
}
Phark方法(不需要额外的标签,而是使用负文本缩进来隐藏内容, 但是这种方法在CSS有效而图像被禁用的情况下还是会损坏可访问性)
/* 使用背景图像和负文本缩进隐藏文本 */
#advancedHeader {
border:; padding:; /* 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:; padding:; /* 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:; padding:; 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(源代码)--我要坚持到底!的更多相关文章
- JavaScript DOM高级程序设计 5动态修改样式和层叠样式表2--我要坚持到底!
把样式置于DOM脚本之外 style属性 我们可以这样设置前景色之类的属性: element.style.color='red'; 也可以使用下面的代码设置背景颜色: element.style.ba ...
- JavaScript DOM 高级程序设计读书笔记二
响应用户操作和事件 事件就是操作检测与脚本执行的组合,或者基于检测到的操作类型在某个对象上调用事件侦听器(事件处理程序). 事件的类型 事件可以分为几种类型:对象事件,鼠标事件,键盘事件(只适用于do ...
- JavaScript DOM高级程序设计 4.2 事件类型--我要坚持到底!
对象事件 load和unload(载入页面的时候调用load,关闭页面的时候调用unload) abort和error 对于载入图像时出现错误的情况,可以使用error事件侦听器来进行说明: ADS. ...
- JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!
一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...
- JavaScript DOM高级程序设计 3.6 实例 将HTML代码转换成DOM代码(附源码)--我要坚持到底!
作为一名Web开发者,最讨厌的事情就是重复性任务,摆脱乏味的日常重复性事物的一种方法,是借助可重用的对象或者说与你现在建立的ADS库类似的库,另外一种让事情变得有意思,且能够加速开发进程的方式是编写能 ...
- JavaScript DOM高级程序设计1.2-循序最佳实践--我要坚持到底!
我这人,最大的毛病就是浮躁. 下面开始我再一次的学习之旅,希望我能坚持到最后.记笔记除了分享以外,更重要的是让自己看见自己学习之路. 先把ADS库贴出来http://vdisk.weibo.com/s ...
- JavaScript DOM 高级程序设计读书笔记一
创建可重用的对象 简而言之,对象就是包含一组变量(称为属性)和函数(称为方法)的集合的实例.对象通常由类派生而来,而类中定义了对象拥有的属性和方法.如果你的脚本中都是对象之间的交互操作,那么就可以称之 ...
- JavaScript DOM高级程序设计 7.向应用程序加入Ajax--我要坚持到底!
有时候,或许是因为理解能力,也或许是因为浮躁,看东西总是不入心,而且还老是想跳过本节,或者赶紧看完本节,这样的恶性循环,让我在即没有真正的学习到知识,又打击我的学习信心,还浪费了我很多事件,我想,当遇 ...
- JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底!
由一个HTML进行说明,我就不敲了,直接copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...
随机推荐
- 修改SSH端口为21
在交流群里面有一位兄弟问到能否将ssh端口号修改为21端口,后来经过测试可以设置,具体步骤如下: 一.修改ssh配置文件的默认端口 #vim /etc/ssh/sshd_config 找到#port ...
- must implement the inherited abstract method DialogInterface.OnClickListener.onClick(DialogInterface, int)问题
依照视屏编写代码如下 class MyButtonListener implements OnClickListener{ @Override public void onClick(View v){ ...
- 网站如何做到完全不需要jQuery
jQuery是现在最流行的JavaScript工具库. 据统计,目前全世界57.3%的网站使用它.也就是说,10个网站里面,有6个使用jQuery.如果只考察使用工具库的网站,这个比例就会上升到惊人的 ...
- Windows平台下为Python添加MySQL支持
到Python官网下载MySQL-python-1.2.5.win32-py2.7.exe 安装MySQL-python-1.2.5.win32-py2.7 附 64位MySQL-python下载地址 ...
- laravel方法汇总详解
1.whereRaw() 用原生的SQL语句来查询,whereRaw('select * from user') 就和 User::all()方法是一样的效果 2.whereBetween() 查询时 ...
- linux命令 chattr超级权限控件
linux命令:chattr 1.作用 修改ext2和ext3文件系统属性(attribute),使用权限超级用户. linux命令:chattr 1.作用修改ext2和ext3文件系统属性(at ...
- springmvc 数据对象回绑
springmvc中,由页面 post到 controller,对象可以在form里面设置modelAttribute达到回绑的目的. 但是如果对象里面有复杂的非String,int的对象,则要在co ...
- BZOJ 1710: [Usaco2007 Open]Cheappal 廉价回文
Description 为了跟踪所有的牛,农夫JOHN在农场上装了一套自动系统. 他给了每一个头牛一个电子牌号 当牛走过这个系统时,牛的名字将被自动读入. 每一头牛的电子名字是一个长度为M (1 &l ...
- The 11th Zhejiang Provincial Collegiate Programming Contest->Problem G:G - Ternary Calculation
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3782 题意:把输入的三元运算用计算机运算出来. ; ci ...
- The7th Zhejiang Provincial Collegiate Programming Contest->Problem A:A - Who is Older?
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3322 可以看样例猜题意的水题. #include<bits/stdc ...