JavaScript access modify CSS style sheet

1. Accessing the CSS style of the style property in the element

You can use the DOM operation to directly access the internal CSS style based on the ID of the property or the name tag, directly using the style object to access

<div id= "myID" style= "Backgroundcolor:blue;" ></div>

<script type= "Text/javascript" >

var Mydiv1=document.getelementbyid ("myID");

alert (Mydiv1.style.backgroundColor);

</script>

2. Accessing externally defined CSS styles

External CSS is stored in the class, not stored in the Style property, we need to use the style sheet of the class. We first get a reference to the stylesheet that defines the class, which is implemented with the Document.stylesheets collection , which contains all the styles in the HTML page, and the DOM defines a collection of Cssrules for each style sheet. This collection contains the CSS rules that are defined in the style sheet (ie is used in rules).

CSS style sheet:

First Rule

div{

Background-color:blue;

width:200px;

height:200px;

}

Rule number Two

a.btn1{

Background:url (imag/1.jpg);

}

accessing CSS

var mycssrules=document.stylesheets[0].cssrules| | Document.stylesheets[0].rules;

Access to the first rule

alert (Mycssrules[0].style.backgroundcolor);

Setting the value

Mycssrules[0].style.backgroundcolor= "BLACK";

Access to the second rule

alert (Mycssrules[1].style.background);

Setting the value

mycssrules[1].style.background= "url (imag/2.jpg)";

JavaScript access modify CSS style sheet