javascript快速入门18--样式
修改元素外观方式
修改元素外观主要有下面3种方法:修改ID,修改className,修改元素的style属性
修改ID?会造成多么混乱的结果可想而知!
修改className确实是非常好的方法,我们甚至可以利用CSS层叠,通过修改body的className来修改整个页面的风格!前提是我们必须写特定的CSS!
//CSS代码
body.redStyle {
border:2px solid red;
}
body.redStyle * {
color:red;
}
body.blueStyle {
border:2px solid blue;
}
body.blueStyle * {
color:blue;
}
//JS代码
document.body.className="redStyle";//切换为“红粉佳人”风格
document.body.className="blueStyle";//切换为“蓝调情怀”风格
但修改className也并非那么容易,不要忘了className可以有多个的!所以不管添加,测试还是移除元素的className,都要小心,下面的函数可以造福人类!
function hasClassName(obj,cn) {
return (new RegExp("\\b"+cn+"\\b")).test(obj.className);
}
function addClassName(obj,cn) {
return obj.className += " " + cn;//第一次添加时,会多出一个前置空格
//但不用担心,浏览会自动将其清除掉
}
function delClassName(obj,cn) {
return obj.className = obj.className.replace(new RegExp("\\b"+cn+"\\b"),"");
//同样,多个className之间的多个空格也会被视为一个
}
元素的style属性?见下面
Style属性
可以在元素的style属性上应用CSS规则,并且style属性上的规则优先级要高于样式表中的规则,因此,通过修改元素的style属性来修改元素的外观可能是最方便并且是最有效的方法了。
同其它HTML属性不同的是,元素的style属性是一个对象,CSS的属性名和属性值分别映射到了style对象的属性名和属性值,如定义对象的style="color:red;",在JavaScript中访问时就可以这样访问:obj.style.color。但style属性也有一些需要注意的地方,比如CSS属性名中包含一些不能用作变量名的非法字符时,在JavaScript中访问时,会自动转换成驼峰命名式。
var oDiv=document.getElementById("oDiv");
alert(oDiv.style.fontSize);//自动驼峰命名
//如果要直接获取style属性中的所有CSS文本,则可以使用style对象的cssText属性
alert(oDiv.style.cssText);
//对于CSS简写方式,各个浏览器返回结果出现分歧
alert(oDiv.style.border);
//需要分别获取值
alert(oDiv.style.borderLeftColor);//但会很麻烦
//对于颜色,火狐总返回RGB表现形式,但设置时可以使用十六进制形式
alert(oDiv.style.backgroundColor);//火狐会返回rgb(x,y,z)
但是元素的style属性仅仅提供了内联样式所定义的CSS规则,而不能反映CSS样式表中的规则
//CSS
#oDiv {
color:blue;
}
//HTML
<div id="oDiv">Div</div>
//JS
alert(document.getElementById("oDiv").style.color);//空的
另外,要注意的是,修改元素的style属性时,必须将一个字符串赋给style对象的属性!
oDiv.style.width = 120;//错误的,虽然在IE下有效果
oDiv.style.fontSize="120%";//正确
获取实际应用在元素上的样式
对于获取元素的实际的CSS层叠最后的样式,IE与W3C DOM存在分歧:IE给对象提供了一个currentStyle属性,它的使用方式很像元素的style属性,但它返回的值是元素的实际样式,而不管样式是内联的还是在外部样式表中定义的! W3C DOM则使用一个全局方法getComputedStyle,它的第一个参数为要检测的对象,第二个参数为null(在未来实现),将返回一个与元素的style也很相似的对象,但一是返回的对象是元素实际样式规则,二是它对于数值型属性总是返回像素值
alert(oDiv.currentStyle.width);//IE,currentStyle保留原来定义在CSS中的单位
alert(window.getComputedStyle(oDiv,null).width);//W3C DOM,并且总是返回计算后的像素值
//另外,两种方式都不能获取那些CSS简写方式定义的,下面两个都会输出空
alert(oDiv.currentStyle.background);
alert(getComputedStyle(oDiv,null).border);
Cross-Browser 获取元素实际样式的方式
function getStyle(obj,cn) {
if (window.getComputedStyle) {//W3C DOM
return window.getComputedStyle(obj,null)[cn];
} else if (obj.currentStyle) {//IE
return obj.currentStyle[cn];
}
return "";
}
样式表
DOM也提供了访问外部样式表的方法,当然,也有无奈的兼容性问题!
向页面添加样式表
//使用添加节点的方法
var lnk = document.createElement("link");
lnk.type="text/css";
lnk.rel="styleSheet";
lnk.href="test.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(lnk);
//在IE下不能使用innerHTML向head中添加HTML代码的方式
//另一种方法就是使用document.write
document.write("");
访问样式表
也许修改个别元素的样式是十分简单的,但更改某条样式表规则(可以使所有相关元素都发生变化),则十分麻烦,并且这种技术只有Win平台上的IE与火狐才支持!但是访问样式表中的CSS规则仍然是有办法的!
alert(document.styleSheets);//document对象的styleSheets属性是一个包含了所有的样式表的伪数组
var sheets = docuemtn.styleSheets;
alert(sheets.length);//length报告了样式表的个数
//style标签出现一次或使用link标签链入CSS一次就算作一个样式表对象
var sheet1 = sheets[0];//可以使用下标来访问
样式表对象的属性
- type,一般都为text/css
- href,link标签为其href属性,而style标签则为空
- id,所属标签的ID
- disabled,样式表是否启用,启用时为false
- cssText(仅IE),样式表中规则的文本形式
- owningElement(IE),ownerNode(W3C DOM),返回引入样式表的那个标签
- rules(IE),cssRules(W3C),对应样式表里所有规则的集合
Rule对象属性
- selectorText ,选择符
- style,与元素上的 style属性十分相似,可以读取和设置CSS规则 ,并且有cssText属性
修改样式表
通过styleSheets访问到的样式表对象具有一些方法来修改其中的样式表规则,但这些方法在各个浏览器中不一样。火狐支持W3C的insertRule()和deleteRule()方法。IE使用专有的addRule()和removeRule()方法。而其它浏览器则不支持任何一个。
var sheet = document.styleSheets[0];
sheet.insertRule("body {color:blue;}",1);//W3C方法,第一个参数为CSS文本,第二个参数为位置,从0开始计数
sheet.addRule("body","color:blue;",1);//IE方法,第一个参数为CSS选择符,第二个为CSS内容,第三个为位置
//而要删除某条规则,则只能通过下标
sheet.removeRule(1);//IE
sheet.deleteRule(1);//W3C
Cross-Browser 总结函数
function addCSS(sheet,selectorText,declarations,index) {
if (sheet.insertRule) {
sheet.insertRule(selectorText+" {"+declarations+"}",index);
} else if (sheet.addRule) {
sheet.addRule(selectorText,declarations,index);
}
}
function delCSS(sheet,index) {
if (sheet.deleteRule) {
sheet.deleteRule(index);
} else {
sheet.removeRule(index);
}
}
javascript快速入门18--样式的更多相关文章
- JavaScript快速入门(四)——JavaScript函数
函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
- javascript快速入门
这个在w3school在线文档讲解的很详细,还能在线练习. 所以我只写一些入门的东西和最常用的总结以及注意事项: JavaScript 是脚本语言 一般被人们称为JS,Jquery就是对js语言的封装 ...
- Web开发初探之JavaScript 快速入门
本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...
- Javascript快速入门(上篇)
Javascript的熟练之路,小弟来了. JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript ...
- javascript快速入门21--DOM总结
跨浏览器开发 市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天.历史上已经有不少方 ...
- javascript快速入门10--运算符,语句
一元运算符 一元运算符只有一个参数,即要操作的对象或值.它们是 ECMAScript 中最简单的运算符. delete 运算符删除对以前定义的对象属性或方法的引用.例如: var obj = new ...
- javascript快速入门8--值,类型与类型转换
原始值和引用值 在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值. 原始值(primitive value)是存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量 ...
- javascript快速入门2--变量,小学生数学与简单的交互
变量 对于变量的理解:变量是数据的代号.如同人的名字一样. var num;//在JavaScript中使用关键字var声明一个变量 在JavaScript中,使用上面的语法,就可以声明一个变量,以便 ...
- Javascript快速入门(下篇)
Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...
- JavaScript快速入门(六)——DOM
概念扫盲 DOM DOM是 Document Object Model(文档对象模型)的缩写,是W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 ...
随机推荐
- java List排序 顺序 倒序 随机
List list = new LinkedList(); for ( int i = 0 ; i < 9 ; i ++ ) { list.add( " a " + i); ...
- HDU1385 (Floyd记录路径)
Minimum Transport Cost Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...
- (转)Oracle中判断某字段不为空及为空的SQL语句
比如 insert into table a (a1,b1)values("a1",''); 对于这种情况,因为表里存的是'',其实是没有内容的,要查询这个字段,不能直接使用 se ...
- Java坦克大战 (四) 之子弹的产生
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- 1.hadoop环境搭建以及配置
提前说明一下:由于环境的配置搞得我很头疼,所以记录下来.并不是零基础,像hadoop的由来.发展史.结构.各个组件,这里都没有介绍,只是为了自己能够在忘了的时候回忆起来,所以记录下来 如何在linux ...
- Selenium2+python自动化32- 测试报告的易读性【转载】
前言 前一篇已经介绍了报告的生成方法,本篇小编优化一下测试报告,使测试报告便于大多数阅读.虽然在我们在测试用例开发时为每个用例添加了注释,但测试报告一般是给非测试人员阅读的,如果能在报告中为每一个测试 ...
- 《锋利的JQuery》读书要点笔记5——jQuery与Ajax的应用
第6章 jQuery与Ajax的应用 Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的 ...
- CF 1005A Tanya and Stairways 【STL】
Little girl Tanya climbs the stairs inside a multi-storey building. Every time Tanya climbs a stairw ...
- ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛
编号 名称 通过率 通过人数 提交人数 A√水题(队友写的 Visiting Peking University 91% 1122 1228 B— Reverse Suffix Array 57% 6 ...
- Java的位运算符与二进制转换
转换: Java整型数据类型有:byte.char.short.int.long.要把它们转换成二进制的原码形式,必须明白他们各占几个字节.,一个字节==8位数 数据类型 ...