DOM manipulating CSS
1 inline-style operations
Syntax for DOM manipulation of a style property:
CSS Style Properties DOM notation
Background-color Node.style.backgroundColor
Color Node.style.color
Font Node.style.font
Font-family node.style.fontFamily
For browser compatibility, the following is the wording:
Node.style.webkitTransform = ""; More important common
Node.style.MozTransform = "";
Node.style.msTransform = "";
Node.style.OTransform = "";
Node.style.transform = "";
2 Working with style sheets
Get the code for the style sheet as follows:
var cssrules = Document.stylesheets[0].cssrules | | Document.stylesheets[0].rules;
Note: IE is a collection of rules, whereas a browser that follows the DOM specification is the cssrules used.
3 Getting the final style
3.1 Get the final style under IE browser
var Divele = document.getElementById ("divID");
var backgroundcolor = DivEle.currentStyle.backgroundColor;
3.2 Getting the final style under a DOM-compliant browser
var Divele = document.getElementById ("divID");
var backgroundcolor = Document.defaultView.getComputedStyle (Divele, null). BackgroundColor;
Of course I can write that.
window.getComputedStyle (Divele, NULL);//Obviously this is more convenient because window can not write
DOM Events
1 A Tag Click event
<a href= "https://www.baidu.com" > Baidu </a>
Click on the a tag, the page can jump to Baidu homepage, throughout the process, through the mouse click a tag, to trigger a tag on the default click event, resulting in jump action.
2 Form submission Events
If you have the following code:
<form action= "https://www.baidu.com" >
<input type= "Submit" value= "Submit"/>
</form>
Click the Submit button, the page will also jump to Baidu homepage, throughout the process, through the mouse click on the Submit button, to trigger the form form the default event of the Submit button, which occurs to jump
Action.
JS Browser side