English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML DOM permette a JavaScript di ottenere e modificare lo stile degli elementi HTML (CSS).
Puoi usarestyleLe proprietà applicano uno stile agli elementi HTML specifici.
Per modificare lo stile dell'elemento HTML, utilizzare la seguente sintassi:
element.style.property = value
Esempio seguente cambia<h1>Stile dell'elemento:
<!DOCTYPE html>
<html>
<h1 id="demo">Proprietà di stile DOM HTML</h1>
<script>
document.getElementById("demo").style.color = "blue";
</script>
</html>Prova a vedere‹/›Quando l'utente fa clic sul pulsante, questo esempio cambia<h1>Stile dell'elemento:
<h1 id="demo">Proprietà di stile DOM HTML</h1>
<button onclick="myFunc()">Click</button>
<script>
function myFunc() {
document.getElementById("demo").style.color = "blue";
}
</script>Prova a vedere‹/›Quando l'utente fa clic sul pulsante, questo esempio cambia anche<h1>Stile dell'elemento:
<h1 id="demo">Proprietà di stile DOM HTML</h1>
<button onclick="document.getElementById('demo').style.color = 'blue';">Click</button>Prova a vedere‹/›Anche, è possibile utilizzarestyleapplica uno stile all'elemento HTML.
Esempio seguente utilizza elementi conid="demo"ottieni informazioni di stile per l'elemento (border-top)
var x = document.getElementById("demo").style.borderTop;Prova a vedere‹/›Attenzione:Quando si ottienestyleL'informazione di stile non è molto utile, perché l'attributo restituisce solo le regole di stile impostate nell'attributo style dell'elemento, non le regole di stile provenienti da altre posizioni, ad esempio da fogli di stile incorporati o esterni.
Per ottenere tutti i valori degli attributi CSS effettivamente utilizzati per la presentazione dell'elemento, è possibile utilizzare il seguentewindow.getComputedStyle()Metodo:
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 += '<br>padding: ' + compStyles.getPropertyValue('padding');Prova a vedere‹/›Puoi anche usareclassNameProprietà per ottenere o impostare la classe CSS degli elementi HTML.
document.getElementById("x").className = "para";Prova a vedere‹/›Puoi anche usare laclassListE 'facile ottenere, impostare o rimuovere classi CSS dagli elementi.
Esempio di seguito verso<p>Aggiungi una classe all'elementoparaClasse:
var elem = document.getElementById("x");
elem.classList.add("para");Prova a vedere‹/›Aggiungi più classi a<p>Elemento:
var elem = document.getElementById("x");
elem.classList.add("para", "shadow");Prova a vedere‹/›Da<p>Elimina una classe dall'elemento:
var elem = document.getElementById("x");
elem.classList.remove("para");Prova a vedere‹/›Cambia tra due classi<p>Elemento:
var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");Prova a vedere‹/›Cambia una classe (“Apri”) per creare un pulsante di navigazione laterale: