Modify CSS Property key functions directly:
Document.createattribute (' style '): Create attribute node
Obj.setattributenode (Attr_node) : Adds the specified property value to the obj element
obj.attributes[' style ']: Gets the Style property value of the obj element
Obj.setattribute (namestring,valuestring) : Assigns the Namestirng property of the obj element to valuestring
<!
DOCTYPE html>
You can change the color of the background or border by clicking the button.
Add:
Some browsers do not define the property value of the style, then the style node does not exist, and some browser style nodes still exist, such as IE. Generally, the child nodes of the style property are #text nodes, but some browsers do not support the attribute node to add child nodes (such as Chrome browser).
Although IE browser always has the style attribute node (that is, the obj.attributes[' style '].nodetype is 2), but can not use NodeValue to assign value to it, so the above code to modify to the following, you can support the Chrome browser, Firefox browser and IE browser
Modify two methods as follows:
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;
}
In the lower version of IE browser using the above code, because the style repeat attribute too much or due to browser defects, will affect the style of display, can be modified to the following code, the same applies to the Chrome browser, Firefox browser and IE browser
obj.style[' background '] = "#" +getcolor (Bg.tostring ());
obj.style[' bordercolor '] = "#" +getcolor (Bd.tostring ());
or
obj.style.background = "#" +getcolor (Bg.tostring ());
Obj.style.borderColor = ' # ' +getcolor (bd.tostring ());
Directly modify ID attribute/class property
Obj.classname = ' className ': Change the class of obj element to ClassName
obj.id = ' idname ': Change the ID of obj element to Idname
Obj.getattribute (' name '): Get the name attribute value of obj element
Obj.attributes: Gets all the attributes of the obj element, and returns the result is an object containing the Name/id/class three properties and their values
<!
DOCTYPE html>