html修改样式的某一个属性,JS直接修改CSS属性/id属性/class属性

直接修改CSS属性关键函数：

document.createAttribute(‘style’)：创建属性节点

obj.setAttributeNode(attr_node)：向obj元素中添加指定的属性值

obj.attributes[‘style’]：获取obj元素的style属性值

obj.setAttribute(nameString,valueString)：为obj元素的nameStirng属性赋值为valueString

直接修改style属性

更改背景颜色

更改边框颜色

通过点击按钮即可更改背景或者边框的颜色.

补充：

有些浏览器若不定义style的属性值，则不会存在该style节点，而有的浏览器style节点依然存在(如IE)。一般来说style属性的子节点为#text节点，但有的浏览器不支持属性节点添加子节点(如Chrome浏览器)。

虽然IE浏览器一直存在style属性节点(即obj.attributes[‘style’].nodeType为2)，但是不可以使用nodeValue对其赋值，所以将上述代码修改为如下即可，可支持Chrome浏览器、FireFox浏览器及IE浏览器

//修改两个方法如下：

function changebgcolor(){

var obj = document.getElementById('frm');

var s = obj.style.cssText;

obj.style.cssText = s+"background:#"+getColor(bg.toString())+";";

bg = bg<<2;

}

function changebdcolor(){

var obj = document.getElementById('frm');

var s = obj.style.cssText;

obj.style.cssText = s+'border-color:#'+getColor(bd.toString())+";";

bd = bd<<2;

}

而在低版本的IE浏览器使用上述代码，由于style重复属性过多或者由于浏览器的缺陷，会影响样式的显示，可以修改为如下代码，同样适用于Chrome浏览器、FireFox浏览器及IE浏览器

obj.style['background'] = "#"+getColor(bg.toString());

obj.style['borderColor'] = "#"+getColor(bd.toString());

//或者

obj.style.background = "#"+getColor(bg.toString());

obj.style.borderColor = '#"+getColor(bd.toString());

直接修改id属性/class属性

obj.className = ‘classname’：将obj元素的class改为classname

obj.id = ‘idname’：将obj元素的id改为idname

obj.getAttribute(‘name’)：获得obj元素的name属性值

obj.attributes：获得obj元素的所有属性，返回结果是包含name/id/class三个属性及其值的对象

直接修改id和class属性

添加删除样式单

添加样式单

删除样式单

添加删除样式单