JavaScript learning 9:dom operation tables and styles

The DOM is simpler and more straightforward to manipulate the HTML generated. However, because browsers always have compatibility and traps, the final operation is not so easy. Let's look at how the DOM operates tables and styles today.

One Operation table

The <table> tag is the most complex structure in HTML, and we can create it using the DOM, or the HTML DOM to manipulate it.

Let's use the DOM to create a table:

<span style= "FONT-SIZE:18PX;" >window.onload=function () {var table=document.createelement (' table '); Table.border=1;table.width=300;var Caption=document.createelement (' caption '); Table.appendchild (caption); Caption.appendchild ( document.createTextNode (' Personnel table '), var thead=document.createelement (' thead '); Table.appendchild (thead); var tr= Document.createelement (' tr '); Thead.appendchild (tr); var th1=document.createelement (' th '); var th2= Document.createelement (' th '); var th3=document.createelement (' th '); Tr.appendchild (Th1); Th1.appendchild ( document.createTextNode (' name ')); Tr.appendchild (Th2); Th2.appendchild (document.createTextNode (' age ')); Tr.appendchild (TH3); Th3.appendchild (document.createTextNode (' sex '));d ocument.body.appendChild (table);}; </span>

Run the code, the effect is as follows

Two-action style

CSS, as an aid to HTML, can enhance the appearance of the page. But not every browser can support the latest CSS capabilities. The ability of CSS is closely related to the DOM level, so it is necessary to detect the level of CSS capability supported by the current browser.

DOM1 level to achieve the most basic document processing, DOM2 and DOM3 on this basis to add more interactive capabilities, here we mainly discuss Css,dom2 added CSS programmatic access and change CSS style information.

1 styles for accessing elements

Any HTML element tag will have a common property style. It returns the Cssstyledeclaration object. Let's look at a few of the most common ways of accessing style styles within a row.

Although you can get CSS styles for a single value by using a style, the style information for a composite value needs to be obtained by calculating the style. DOM2-level style, the getComputedStyle () method is provided under the Window object. Accepts two parameters, a style element that needs to be computed, a second pseudo-class (: hover), and null if there is no pseudo-class.

2 Manipulating style Sheets

You can use the Style property to set CSS styles within a row, while the most common method is called by ID and class. Before we used the style property, we could only get and set the style within the line, if it was through inline <style> or a link <link> provided style rules would be helpless, Later we came into contact with getComputedStyle and Currentstyle, which can only be acquired but cannot be set.

The Cssstylesheet type represents the style sheet that is contained by the <link> element and the <style> element.

The two elements themselves return the htmllinkelement and htmlstyleelement types, but the Cssstylesheet type is more general, get this type non-IE use sheet attribute, ie use stylesheet

var sheet=link.sheet| | Link.stylesheet;

And we can get a list of rule collections for the style sheet through the Cssrules property (not IE) and the Rules property (IE). This allows us to do a specific operation on each style.

varrules=sheet.cssrules| | Sheet.rules;

Summary: Three ways to manipulate CSS, the first style line, readable and writable; the second inline, inline, and link, using getComputedStyle or currentstyle, readable and non-writable; the third type of cssrules or rules, inline and linked readable and writable.

JavaScript learning 9:dom operation tables and styles