修改元素外观方式

修改元素外观主要有下面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--样式的更多相关文章

  1. JavaScript快速入门(四)——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  2. javascript快速入门

    这个在w3school在线文档讲解的很详细,还能在线练习. 所以我只写一些入门的东西和最常用的总结以及注意事项: JavaScript 是脚本语言 一般被人们称为JS,Jquery就是对js语言的封装 ...

  3. Web开发初探之JavaScript 快速入门

    本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...

  4. Javascript快速入门(上篇)

    Javascript的熟练之路,小弟来了. JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript ...

  5. javascript快速入门21--DOM总结

    跨浏览器开发 市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天.历史上已经有不少方 ...

  6. javascript快速入门10--运算符,语句

    一元运算符 一元运算符只有一个参数,即要操作的对象或值.它们是 ECMAScript 中最简单的运算符. delete 运算符删除对以前定义的对象属性或方法的引用.例如: var obj = new ...

  7. javascript快速入门8--值,类型与类型转换

    原始值和引用值 在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值. 原始值(primitive value)是存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量 ...

  8. javascript快速入门2--变量,小学生数学与简单的交互

    变量 对于变量的理解:变量是数据的代号.如同人的名字一样. var num;//在JavaScript中使用关键字var声明一个变量 在JavaScript中,使用上面的语法,就可以声明一个变量,以便 ...

  9. Javascript快速入门(下篇)

    Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...

  10. JavaScript快速入门(六)——DOM

    概念扫盲 DOM DOM是 Document Object Model(文档对象模型)的缩写,是W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 ...

随机推荐

  1. java List排序 顺序 倒序 随机

    List list = new LinkedList(); for ( int i = 0 ; i < 9 ; i ++ ) { list.add( " a " + i); ...

  2. HDU1385 (Floyd记录路径)

    Minimum Transport Cost Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  3. (转)Oracle中判断某字段不为空及为空的SQL语句

    比如 insert into table a (a1,b1)values("a1",''); 对于这种情况,因为表里存的是'',其实是没有内容的,要查询这个字段,不能直接使用 se ...

  4. Java坦克大战 (四) 之子弹的产生

    本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...

  5. 1.hadoop环境搭建以及配置

    提前说明一下:由于环境的配置搞得我很头疼,所以记录下来.并不是零基础,像hadoop的由来.发展史.结构.各个组件,这里都没有介绍,只是为了自己能够在忘了的时候回忆起来,所以记录下来 如何在linux ...

  6. Selenium2+python自动化32- 测试报告的易读性【转载】

    前言 前一篇已经介绍了报告的生成方法,本篇小编优化一下测试报告,使测试报告便于大多数阅读.虽然在我们在测试用例开发时为每个用例添加了注释,但测试报告一般是给非测试人员阅读的,如果能在报告中为每一个测试 ...

  7. 《锋利的JQuery》读书要点笔记5——jQuery与Ajax的应用

    第6章 jQuery与Ajax的应用 Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的 ...

  8. CF 1005A Tanya and Stairways 【STL】

    Little girl Tanya climbs the stairs inside a multi-storey building. Every time Tanya climbs a stairw ...

  9. ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛

    编号 名称 通过率 通过人数 提交人数 A√水题(队友写的 Visiting Peking University 91% 1122 1228 B— Reverse Suffix Array 57% 6 ...

  10. Java的位运算符与二进制转换

    转换: Java整型数据类型有:byte.char.short.int.long.要把它们转换成二进制的原码形式,必须明白他们各占几个字节.,一个字节==8位数 数据类型                ...