修改元素外观方式

修改元素外观主要有下面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. centos python2.6升级到2.7出现的问题

    centos自带的python版本为2.6,在使用tornado时会出现如下报错: NameError: global name 'memoryview' is not defined 因此需要升级到 ...

  2. 关于Solaris的一些小技巧

    关于Solaris的一些小技巧 http://blog.chinaunix.net/uid-9787800-id-2394301.html SunOS 操作命令及linux区别 http://blog ...

  3. GUI自动化模块化实现方式

    效率为王:脚本与数据的解耦 + Page Object模型 1.数据驱动:实现了“测试脚本和数据的解耦”,数据驱动测试的数据文件中不仅可以包含测试输入数据,还可以包含测试验证结果数据,甚至可以包含测试 ...

  4. 基于java容器注解---基于泛型的自动装配

    上面利用@Configuration和@Bean配置bean,中间利用@Autowired,指定s1和s2分别指向哪个实现类,下面利用@Autowired,指定s中只有Integer实现类 例子: 在 ...

  5. 基于iscroll实现下拉和上拉刷新

    在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版 ...

  6. cpu中的缓存和操作系统中的缓存分别是什么?

    cpu中的缓存和操作系统中的缓存分别是什么? 在操作系统中,为了提高系统的存取速度,在地址映射机制中增加了一个小容量的联想寄存器,即块表.用来存放当前访问最频繁的少数活动页面的页数.当某用户需要存取数 ...

  7. js排序(转载)

    原文地址:http://blog.csdn.net/wzwlln/article/details/6187732#plain sort(sortfunction)为javascript的数组对象(Ar ...

  8. asp.net数据类型--泛型

    asp.net有很多的数据类型,同时c#等均是强数据类型,在使用的过程,存在因数据类型不一致,在编译时通过,在使用过程中出错的情况,因此从2.0起,增加泛型这种类型.这种类型,在定义时不指定类型,而在 ...

  9. python strip_tags 支持保留指定标签

    #coding:utf-8 import re def strip_tags(string, allowed_tags=''): if allowed_tags != '': # Get a list ...

  10. 【NppExec】直接在notepad++运行python的插件:NppExec

    1.下载NppExec    http://sourceforge.net/projects/npp-plugins/files/NppExec/ 2.安装   解压,全部复制到d:/program ...