JS directly modify CSS properties/ID properties/class Properties

Source: Internet
Author: User
Tags border color getcolor

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> 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.