// 使用DOM来创建表格;
var table = document.createElement('table');
table.border = 1;
table.width = 300;
var caption = document.createElement('caption');
table.appendChild(caption);
caption.appendChild(document.createTextNode('人员表'));
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');
tr.appendChild(th1);
th1.appendChild(document.createTextNode('姓名'));
tr.appendChild(th2);
th2.appendChild(document.createTextNode('年龄'));
document.body.appendChild(table);
Nach dem Login kopieren
// Die Tabelle ist komplex und hat viele Ebenen. Die Verwendung des vorherigen DOM zum Abrufen eines bestimmten Elements wird empfohlen
Einführung in HTMLDOM-Eigenschaften und -Methoden
Beschreibung der Eigenschaft oder Methode
caption enthält einen Verweis auf das Element
tBodies enthält eine HTMLCollection von
2 Bedienungsstil
Als Hilfsmittel zu (X)HTML kann CSS den Anzeigeeffekt der Seite verbessern, aber nicht jeder Browser kann die neuesten CSS-Funktionen unterstützen;
CSS-Funktionen hängen eng mit den DOM-Ebenen zusammen, daher ist es notwendig, die Ebene der vom aktuellen Browser unterstützten CSS-Funktionen zu ermitteln;
Es gibt drei Möglichkeiten, Stile in HTML zu definieren:
(1). Verwenden Sie das Stilattribut, um Stile für bestimmte Elemente zu definieren
(2). Verwenden Sie das Element , um eingebettete Stile zu definieren
(3). Enthalten Sie externe Stylesheet-Dateien über das Element 1 // DOM1-Ebene implementiert die grundlegendste Dokumentverarbeitung, DOM2 und DOM3 fügen auf dieser Basis weitere interaktive Funktionen hinzu;
DOM2 fügt CSS-Programmierzugriffsmethoden hinzu und ändert CSS-Stilinformationen;
Erkennen Sie, ob der Browser CSS-Funktionen auf DOM1-Ebene oder CSS-Funktionen auf DOM2-Ebene unterstützt
Alert('DOM1-Level-CSS-Fähigkeit:' document.implementation.hasFeature('CSS','2.0'));
Alert('DOM2-Level-CSS-Fähigkeit:' document.implementation.hasFeature('CSS2','2.0'));
1. Greifen Sie auf den Stil des Elements zu
(1).style Eigenschaft/Objekt
// Jedes HTML-Element-Tag verfügt über ein gemeinsames Attribut: style, das ein CSSStyleDeclaration-Objekt
zurückgibt
CSS-Eigenschaften und JavaScript-Aufrufe
CSS-Eigenschaften JavaScript-Aufrufe
Farbe style.color
Schriftgröße style.fontSize
float style.cssFloat (nicht-IE)
float style.styleFloat(IE)
var box = document.getElementById('box');
box.style; // CSSStyleDecaration;
box.style.color;
box.style.fontSze; // 20px;
// Kompatibel mit der Float-Operation des IE;
Typeof box.style.cssFloat != 'undefiniert' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right';
DOM2级样式规范为style对象定义属性和方法
属性或方法 说明
cssText 访问或设置style中的CSS代码;
box.style.cssText; // 获取CSS代码;
// PS:style属性仅仅只能获取行内的CSS样式,对于另外两种形式内联