Erfahren Sie, wie Sie mit JavaScript CSS-Stile ändern-Front-End-Fragen und Antworten-php.cn

Erfahren Sie, wie Sie mit JavaScript CSS-Stile ändern

PHPz

Freigeben： 2023-04-24 10:32:15

Original

498 Leute haben es durchsucht

CSS (Cascading Style Sheets) ist eine Technologie, die wir häufig im Webdesign verwenden. Sie kann das Erscheinungsbild und Layout von Webseiten verändern und Webseiten schöner und leichter lesbar machen. In diesem Artikel erfahren Sie, wie Sie CSS-Stile mithilfe von JavaScript ändern.

Zuerst definieren Sie ein Stylesheet in HTML. Hier ist ein einfaches Beispiel:

<style>
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
</style>

<div id="box">Hello World!</div>
<button id="redBtn">变成红色</button>
<button id="blueBtn">变成蓝色</button>

Nach dem Login kopieren

In diesem Beispiel definieren wir zwei CSS-Stilklassen „rot“ und „blau“ und setzen die Textfarben auf Rot bzw. Blau.

Dann können wir in JavaScript die Methode document.querySelector() verwenden, um das DOM-Element und das .style-Attribut abzurufen, um den CSS-Stil zu ändern. Hier ist ein Beispiel:

const box = document.querySelector('#box');
const redBtn = document.querySelector('#redBtn');
const blueBtn = document.querySelector('#blueBtn');

redBtn.onclick = () => {
  box.style.color = 'red';
};

blueBtn.onclick = () => {
  box.style.color = 'blue';
};

Nach dem Login kopieren

In diesem Beispiel haben wir drei Variablen erstellt, die dem

-Element und zwei

Quelle：php.cn

Vorheriger Artikel：Besprechen Sie, wie ArrayList mithilfe von JavaScript implementiert wird Nächster Artikel：So legen Sie den Schriftstil in HTML fest

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors