Article Directory
A, CSS style three
Second, by operating the DOM CSS inline style
Modify (set) style syntax
- Elements .style. Style style name = value
Read style syntax
- Elements .style. Style Name
For example:
1. Write a simple box plus CSS styles
CSS style as follows:
#box1{
width: 200px;
height: 200px;
background-color: #FF0000;
}
2. Modify Style plus a btn01
btn01.onclick=function(){
var box1= document.getElementById("box1");
//修改box1样式
box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor="yellow";
};
3. plus a btn02 read style
btn02.onclick = function(){
//读取box1的样式
alert(box1.style.width);
}
important point:
-
css style name contains - instead hump nomenclature, go - the first letter capitalized
, such as: background-color becomes backgroundColor -
! Style plus important, js does not modify the original styles
such as: background-color:! # FF0000 important;
Three, DOM reads the CSS style interior and external style
