English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript Grundlagen教程

JavaScript Objekt

JavaScript Funktion

JS HTML DOM

JS Browser BOM

AJAX Grundlagen教程

JavaScript Referenzhandbuch

JS DOM CSS ändern

HTML DOM ermöglicht es JavaScript, die Stile (CSS) von HTML-Elementen zu erhalten und zu ändern.

更改元素样式

您可以使用style属性将样式应用于特定的HTML元素。

要更改HTML元素的样式，请使用以下语法：

element.style.property　=　value

下面的示例更改<h1>元素的样式：

<!DOCTYPE　html>
<html>
<h1　id="demo">HTML　DOM　style　Property</h1>
<script>
document.getElementById("demo").style.color　=　"blue";
</script>
</html>
Testen Sie heraus‹/›

当用户单击按钮时，此示例更改<h1>元素的样式：

<h1　id="demo">HTML　DOM　style　Property</h1>
<button　onclick="myFunc()">Click</button>
<script>
function　myFunc()　{
　　　document.getElementById("demo").style.color　=　"blue";
}
</script>
Testen Sie heraus‹/›

当用户单击按钮时，此示例还更改了<h1>元素的样式：

<h1　id="demo">HTML　DOM　style　Property</h1>
<button　onclick="document.getElementById('demo').style.color　=　'blue';">Click</button>
Testen Sie heraus‹/›

从元素获取样式信息

同样，您可以使用style属性将样式应用于HTML元素。

以下示例将从具有id="demo"的元素获取样式信息（border-top）：

var　x　=　document.getElementById("demo").style.borderTop;
Testen Sie heraus‹/›

注意：当从元素中获取style样式信息时，该属性不是很有用，因为该属性仅返回元素的style属性中设置的样式规则，而不返回来自其他位置的样式规则，例如嵌入式样式表中的样式规则，或外部样式表。

要获取实际上用于呈现元素的所有CSS属性的值，可以使用以下window.getComputedStyle()方法：

let　para　=　document.querySelector('p');
let　compStyles　=　window.getComputedStyle(para);
para.innerHTML　=　'font-size:　'　+　compStyles.getPropertyValue('font-size');
para.innerHTML　+=　'<br>line-height:　'　+　compStyles.getPropertyValue('line-height');
para.innerHTML　+=　'Padding:　'　+　compStyles.getPropertyValue('Padding');
Testen Sie heraus‹/›

CSS-Klassen zu einem Element hinzufügen

Sie können auchclassNameEigenschaft verwenden, um CSS-Klassen von HTML-Elementen zu erhalten oder zu setzen.

document.getElementById("x").className = "para";
Testen Sie heraus‹/›

Sie können auch dieclassListEigenschaften einfach aus einem Element abgerufen, gesetzt oder gelöscht werden können, um CSS-Klassen zu verwalten.

Das folgende Beispiel zeigt, wie<p>Ein Element hinzufügenparaKlasse:

var elem = document.getElementById("x");
elem.classList.add("para");
Testen Sie heraus‹/›

Mehrere Klassen zu<p>Element:

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");
Testen Sie heraus‹/›

Von<p>Eine Klasse aus einem Element löschen:

var elem = document.getElementById("x");
elem.classList.remove("para");
Testen Sie heraus‹/›

Zwischen zwei Klassen umschalten<p>Element:

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");
Testen Sie heraus‹/›

Wechseln Sie eine Klasse („Öffnen“), um einen Seiten-Navigationsknopf zu erstellen:

Code ausführen
JS DOM Elementeigenschaften ändernJS DOM HTML Inhalt ändern