Rendering im Browser verstehen: CSSOM-js-Tutorial-php.cn

Hey, dieser Artikel ist Teil einer Serie zum Rendern im Browser. Wenn Sie die vorherigen Artikel noch nicht gelesen haben, schauen Sie sich die folgenden Links an:

Rendering im Browser verstehen: DOM

Im letzten Artikel haben wir untersucht, wie HTML vom Browser über das DOM (Document Object Model) verarbeitet wird, das die Struktur der Webseite definiert. Allerdings besteht eine Webseite nicht nur aus HTML und was viele noch nicht wissen ist, dass CSS auch eine eigene Darstellung in Form eines Objekts hat, genannt CSSOM (CSS Object Model).

Der Browser verwendet CSSOM in Verbindung mit dem DOM, um die Seite zu erstellen, wobei Struktur (HTML) und Stile (CSS) kombiniert werden, was zu einer harmonischen visuellen Präsentation führt.

In diesem Artikel werden wir unser Wissen über CSSOM vertiefen und seine Struktur, Bedeutung und seine Manipulationsmöglichkeiten verstehen.

Was ist CSSOM?

Das CSSOM ist wie das DOM eine hierarchische Datenstruktur, seine Funktion besteht jedoch darin, das CSS eines Webdokuments darzustellen.

CSSOM wird von Browsern generiert, nachdem Stildateien geladen und verarbeitet wurden. Obwohl es getrennt vom DOM erstellt wird, arbeiten beide zusammen, sodass der Browser die Seite mit der richtigen Struktur (DOM) zusammenstellen und die entsprechenden Stile (CSSOM) anwenden kann.

Die Hauptfunktion von CSSOM besteht darin, dem Browser eine detaillierte „Karte“ der Stile bereitzustellen, die auf jedes Element auf der Seite angewendet werden sollen.

Sehen Sie sich unten eine visuelle Darstellung des CSSOM an:

Entendendo renderização no browser: CSSOM

Im Code würde diese Darstellung so aussehen:

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

Nach dem Login kopieren

Und der DOM-Baum, der sich auf das CSSOM bezieht, das wir zuvor gesehen haben, wird wie folgt dargestellt:

Entendendo renderização no browser: CSSOM

CSSOM manipulieren

Browser stellen uns eine Reihe von APIs zur Verfügung, die es uns ermöglichen, CSS mithilfe von Javascript zu manipulieren. Es ähnelt der DOM-API, jedoch für CSS anstelle von HTML.

Mit dieser API können wir das CSS einer Seite dynamisch lesen und bearbeiten.

Die einfachste Möglichkeit, Stile zu manipulieren, ist die im Dokument vorhandene Stileigenschaft.

Um zum ersten Mal auf ein CSSOM-Element zuzugreifen und es zu bearbeiten, öffnen Sie die Browserkonsole und führen Sie den folgenden Code aus:

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

Nach dem Login kopieren

Nachdem Sie das obige Code-Snippet ausgeführt haben, empfehle ich Ihnen, die Seitenelemente zu überprüfen und den Text zu analysieren. Beachten Sie, dass unser Körper jetzt einen Inline-Stil hat und mehr oder weniger so aussehen wird:

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

Nach dem Login kopieren

Wir können jede CSS-Eigenschaft auf unserer Seite hinzufügen oder ändern, immer nach dem Muster element.style.propertyname.

Eine andere Möglichkeit, Inline-Stile zu manipulieren, sind einige im Stil vorhandene Methoden.

setProperty: Mit dieser Methode können Sie den Wert einer Inline-Eigenschaft hinzufügen oder ändern.

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

Nach dem Login kopieren

getPropertyValue: Mit dieser Methode können Sie auf den Wert einer Inline-Eigenschaft zugreifen.

<body>



<p>Isso acontece porque alterar a propriedade style de um elemento só tem efeito para estilos inlines.<br>
A mesma lógica se aplica para leitura de propriedades do style. Se você executar o código abaixo não vai ter nenhum retorno, pois nenhum momento definimos a propriedade color usando estilo inline.<br>
</p>

<pre class="brush:php;toolbar:false">console.log(document.body.style.background); // '''

Nach dem Login kopieren

removeProperty: Mit dieser Methode können Sie eine Inline-Eigenschaft entfernen.

document.body.style.setProperty("background", "red");

// Agora execute o próximo comando

document.body.style.setProperty("background", "blue");

Nach dem Login kopieren

getComputedStyle funktioniert schreibgeschützt. Sie können auf die Stilinformationen für jedes Element oder Pseudoelement zugreifen, aber Sie können keine Änderungen vornehmen.

Was ist mit Stilen, die nicht inline sind?

Das Schreiben von Inline-Stilen ist nicht sehr verbreitet, daher können wir auch auf berechnete Stile zugreifen, die wir in unserem Stylesheet definieren. Dazu können wir direkt auf unser Stylesheet zugreifen und es bearbeiten.

Führen Sie das Code-Snippet unten in Ihrer Browserkonsole aus:

document.body.style.getPropertyValue("background"); // blue

Nach dem Login kopieren

Damit haben Sie Zugriff auf alle im Kopf Ihres HTML deklarierten Stylesheets.

Diese Stylesheets werden im Listenformat zurückgegeben (es sieht aus wie ein Array, ist es aber nicht) und Sie können über den Index darauf zugreifen.

document.body.style.removeProperty("background");

Nach dem Login kopieren

Von nun an empfehle ich, die Tests woanders durchzuführen, da dieser Blog mit Tailwind CSS erstellt wurde und die Manipulation des Stylesheets komplizierter wird.

Greifen Sie auf diese Seite zu und führen Sie die Befehle in der Konsole aus.

document.styleSheets;

Nach dem Login kopieren

Durch Ausführen des obigen Codes haben Sie Zugriff auf alle im Stylesheet vorhandenen CSS. Nach der gleichen Logik wie oben können Sie über den Index auf Elemente zugreifen.

document.styleSheets[1];

Nach dem Login kopieren

Im obigen Code greife ich auf die Deklaration des Seitenkörperstils zu.

document.styleSheets[0].cssRules;

Nach dem Login kopieren

Durch den Zugriff auf die Stileigenschaft können wir jede beliebige CSS-Eigenschaft hinzufügen oder ändern, ohne jedoch Inline-Stile schreiben zu müssen.

Ich empfehle Ihnen, etwas mehr mit dieser API herumzuspielen, indem Sie die Indizes und das CSS verschiedener Elemente ändern.

Abschluss

Genau wie das DOM ist das CSSOM eine baumförmige Darstellung, die von Browsern für den Rendering-Prozess verwendet wird.

Wir können auf das gesamte CSS der Seite zugreifen und es mithilfe von Javascript frei bearbeiten. Um CSS-Tools wie gestaltete Komponenten, lineare Elemente usw. zu verstehen, ist es wichtig zu wissen, wie diese Art von Operation ausgeführt wird.

Grundkenntnisse sind das Wichtigste, werden aber ständig vernachlässigt.
Im Kontext der Webentwicklung sind Kenntnisse über HTML, CSS, JavaScript und die Funktionsweise des Browsers unerlässlich. Mit dieser soliden Grundlage können Sie jede Technologie erlernen, die auf diesen Grundlagen basiert.

Vielen Dank!!

Danke, dass Sie hier sind!

Ich hoffe, Sie haben bei dieser Lektüre etwas Neues gelernt.

Bis zum nächsten Mal!

Referenzen

CSS-Objektmodell

Aufbau des Objektmodells

CSSOM – CSS-Objektmodell

Eine Einführung und Anleitung zum CSS-Objektmodell (CSSOM)

Das obige ist der detaillierte Inhalt vonRendering im Browser verstehen: CSSOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!