直接修改CSS属性关键函数:
document.createAttribute(‘style’):创建属性节点
obj.setAttributeNode(attr_node):向obj元素中添加指定的属性值
obj.attributes[‘style’]:获取obj元素的style属性值
obj.setAttribute(nameString,valueString):为obj元素的nameStirng属性赋值为valueString
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直接修改style属性</title>
<style>
#frm{
border:1px solid #00f;
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="frm"></div>
<button onclick="changebgcolor()">更改背景颜色</button>
<button onclick="changebdcolor()">更改边框颜色</button>
<script>
var bg = 0xffff;
var bd = 0xffff;
function getColor(str){
var len = str.length;
if(len<=6){
for(var i=0;i<6-len;i++){
str ='0'+str;
}
}else{
str = str.slice(len-6, len);
}
return str;
}
function changebgcolor(){
var obj = document.getElementById('frm');
if(obj.attributes['style'] == undefined){
// 创建属性节点
var attr_node = document.createAttribute('style');
// 向元素中添加指定的属性节点
obj.setAttributeNode(attr_node);
}
// 获取原先style属性的值
var s = obj.attributes[obj.attributes.length-1].value;
// 重新添加属性值
obj.attributes[obj.attributes.length-1].value = s+'background:#'+getColor(bg.toString())+";";
bg = bg<<2;
}
function changebdcolor(){
var obj = document.getElementById('frm');
if(obj.attributes['style'] == undefined){
var attr_node = document.createAttribute('style');
var text_node = document.createTextNode('');
obj.setAttributeNode(attr_node);
}
var s = obj.attributes[obj.attributes.length-1].value;
obj.attributes[obj.attributes.length-1].value = s+'border-color:#'+getColor(bd.toString())+';';
bd = bd<<2;
}
</script>
</body>
</html>
通过点击按钮即可更改背景或者边框的颜色.
补充:
有些浏览器若不定义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三个属性及其值的对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直接修改id和class属性</title>
<style>
#frm{
border:2px solid #00f;
width: 200px;
height: 20px;
}
.frm{
background-color: #c0f2f8;
}
</style>
</head>
<body>
<div name="obj">添加删除样式单</div>
<button onclick="addStyle(this)">添加样式单</button>
<button onclick="deleteStyle(this)">删除样式单</button>
<div name="obj">添加删除样式单</div>
<script>
function addStyle(obj){
var fa_node = obj.parentNode;
for(var i=0;i<fa_node.childNodes.length;i++){
if(fa_node.childNodes[i].attributes != null){
if(fa_node.childNodes[i].getAttribute('name') == 'obj'){
fa_node.childNodes[i].id = 'frm';
fa_node.childNodes[i].className = 'frm';
}
}
}
}
function deleteStyle(obj){
var fa_node = obj.parentNode;
for(var i=0;i<fa_node.childNodes.length;i++){
if(fa_node.childNodes[i].attributes != null){
if(fa_node.childNodes[i].getAttribute('name') == 'obj'){
fa_node.childNodes[i].id = '';
fa_node.childNodes[i].className = '';
}
}
}
}
</script>
</body>
</html>