JavaScript learning 9:dom operation tables and Styles __java

The DOM is simpler and more straightforward when it generates HTML for operations. However, because browsers always have compatibility and traps, the final operation is not so easy. So this article is going to take a look at how DOM operates tables and styles today.

A table of operations

The <table> tag is one of the most complex structures in HTML, and we can create it through the DOM, or the HTML DOM to manipulate it.

Here we 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 '));
	
	Document.body.appendChild (table);
</span>

Run the code, the effect is as follows

Two-operation style

CSS as a helper of HTML, you can enhance the display 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 implementation of the most basic document processing, DOM2 and DOM3 on this basis to add more interaction capabilities, where we mainly discuss CSS,DOM2 increased CSS programmatic access and change CSS style information.

1 accessing the style of an element

Any HTML element tag will have a generic property style. It returns the Cssstyledeclaration object. Let's look at several of the most common ways to access the inline style style.

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

2 Operation style Sheet

Use the Style property to set CSS styles within a row, and the most commonly used method when invoked by ID and class. Before we used the style property, we could only get and set the style within the line, and if it was done by inline <style> or link <link> provided style rules, Later we came into contact with getComputedStyle and Currentstyle, which can only be obtained but cannot be set.

The Cssstylesheet type represents a style sheet that is contained through <link> elements and <style> elements.

The two elements themselves return the htmllinkelement and htmlstyleelement types, but the Cssstylesheet type is more generic, getting this type of non ie using the sheet attribute, ie using stylesheet

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

And we can get a list of rules for a style sheet by using the Cssrules property (not IE) and the rule attribute (ie). So we can do a specific action 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 writable, and the third cssrules or rules, inline and link readable and writable.