Detailliertes Codebeispiel zum Ändern von CSS-Eigenschaften mit nativem JavaScript

Um CSS-Eigenschaften mit JavaScript zu ändern, müssen Sie nur natives JavaScript schreiben.

Verwenden Sie JS, um den Klassenattributwert des Tags zu ändern:

Das Klassenattribut ist eine der Möglichkeiten, auf das Stylesheet im Tag zu verweisen. Sein Wert ist ein Selektor des Stylesheets Wenn die Klasse geändert wird, werden auch der Wert des Attributs und das vom Tag referenzierte Stylesheet geändert. Dies ist also die erste Änderungsmethode.

Der Code zum Ändern des Klassenattributs eines Tags lautet:

document.getElementById( id ).className = string;

document.getElementById( id ) wird verwendet Holen Sie sich das Tag. Sie können das entsprechende DOM-Objekt auch mit anderen Methoden abrufen. className ist eine Eigenschaft des DOM-Objekts, die dem Klassenattribut des Labels entspricht. String ist der neue Wert des Klassenattributs , das ein definierter CSS-Selektor sein sollte.

Mit dieser Methode können Sie das CSS-Stylesheet des Tags durch ein anderes ersetzen oder den angegebenen Stil auch auf ein Tag anwenden, auf das kein CSS-Stil angewendet wurde.

Beispiel:

<style type="text/css"> 
.txt { 
font-size: 30px; font-weight: bold; color: red; 
} 
</style> 
<p id="tt">欢迎光临！</p> 
<p><button onclick="setClass()">更改样式</button></p> 
<script type="text/javascript"> 
function setClass() 
{ 
document.getElementById( "tt" ).className = "txt"; 
} 
</script>

Verwenden Sie JS, um den Stilattributwert des Tags zu ändern:
Das Stilattribut ist auch eine der Möglichkeiten, auf das zu verweisen Stylesheet für das Tag. Der Wert ist ein CSS-Stylesheet. Das DOM-Objekt verfügt auch über ein Style-Attribut, aber dieses Attribut selbst ist auch ein Objekt. Die Attribute des Style-Objekts entsprechen eins zu eins. Wenn die Attribute des Style-Objekts geändert werden, ändert sich der CSS-Attributwert Das entsprechende Tag ändert sich ebenfalls, daher ist dies die zweite Änderungsmethode.

Der Code zum Ändern des CSS-Attributs einer Beschriftung lautet:

document.getElementById( id ).style.Attribute name = value;
document.getElementById( id ) wird verwendet, um Holen Sie sich die entsprechende Beschriftung. Sie können das DOM-Objekt auch mit anderen Methoden abrufen. style ist eine Eigenschaft des DOM-Objekts, das selbst ein Objekt ist. Der Eigenschaftsname ist der Eigenschaftsname des Style-Objekts, das einer bestimmten CSS-Eigenschaft entspricht.

Hinweis: Diese Methode ändert eine einzelne CSS-Eigenschaft. Sie hat keinen Einfluss auf die Werte anderer CSS-Eigenschaften auf dem Etikett.

Beispiel:

p id="t2">欢迎光临！</p> 
<p><button onclick="setSize()">大小</button> 
<button onclick="setColor()">颜色</button> 
<button onclick="setbgColor()">背景</button> 
<button onclick="setBd()">边框</button> 
</p> 
<script type="text/javascript"> 
function setSize() 
{ 
document.getElementById( "t2" ).style.fontSize = "30px"; 
} 
function setColor() 
{ 
document.getElementById( "t2" ).style.color = "red"; 
} 
function setbgColor() 
{ 
document.getElementById( "t2" ).style.backgroundColor = "blue"; 
} 
function setBd() 
{ 
document.getElementById( "t2" ).style.border = "3px solid #FA8072"; 
} 
</script>

Das obige ist der detaillierte Inhalt vonDetailliertes Codebeispiel zum Ändern von CSS-Eigenschaften mit nativem JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!