var box = document.getElementById("box");

box.id = "pox";

将id = “box”，改为id = “pox”；

但id = “box”依然存在，这样就不符合W3C标准。不建议使用。

box.className = "box5"; 将会把原来的className 清除只有一个类名为box5的类。

如果想有用className避免这种缺陷，可以写成 box.className ="box5 box6 ....",但是这种方法太过麻烦，会造成冗余，因此可以用下面的方法：

原生的js中并没有添加/删除类这些属性或方法，为了实现这一功能，因此写出了一下两个函数：

1.js原生的addClass()

首先判断是否有要添加的类名:

function hasClass(element, cName){

return !!element.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'));

}

判断后，如果没有则添加

function addClass(element, cName){

if (!hasClass(element, cName)) {

return element.className += " " + cName;

};

}

addClass(box,"box6");

addClass(box,"box7");

此时的addClass()添加的类并不会覆盖掉原来的类，减少了冗余。

2.从多个类中删除一个元素 removeClass,其余类保留：

function removeClass(element,cName){

if (hasClass(element,cName)) {

element.className = element.className.replace(new RegExp('(\\s|^)' + cName + '(\\s|$)'), " ");

};

}

removeClass(box,"box6"); //test,box,box7

JS:操作样式表3：内联和外链样式

var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...

JS:操作样式表1：行内样式

//访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...

[荐]使用Js操作注册表

使用Js操作注册表 要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作. WshShell对象:可以在本地运行程序.操纵注册表内容.创建快捷方式或访问 ...

JS 操作样式 style

1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...

Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表

操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

DOM操作样式表及其兼容性

DOM操作样式表的时候,存在很多浏览器兼容上的问题,测试的时候用的是Firefox 28.0.IE11.IE8.Chrome.测试的时候发现,不兼容问题基本上都是IE8和非IE浏览器之家的问题,很多I ...

JavaScript编程：使用DOM操作样式表

6.使用DOM操作样式表: 操纵元素的Style样式属性:         background-color:style.backgroundColor         color:style.col ...

js进阶 9-11 select选项框如何动态添加和删除元素

js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

js修改样式表规则