Explore how to use JavaScript to change CSS styles

CSS (Cascading Style Sheets) is a technology we often use in web design. It can change the appearance and layout of web pages, and make web pages more beautiful and easier to read. In this article, we will explore how to change CSS styles using JavaScript.

First, define a style sheet in HTML. The following is a simple example:

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

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

In this example, we define two CSS style classes "red" and "blue", and set the text colors to red and blue respectively.

Then, in JavaScript, we can use the document.querySelector() method to obtain DOM elements and use the .style attribute to change the CSS style. The following is an example:

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';
};

In this example, we created three variables, corresponding to the

element and two elements in HTML. Then, we use the .onclick event to bind a function to each button that changes the color of the

element when the button is clicked.

In this example, we use the .style property to change the CSS style. This property can set any CSS properties of the element, such as color, background color, font, size, etc. We can also use the .classList attribute to add or remove the CSS class of an element, for example:

box.classList.add('red');
box.classList.remove('blue');

In this example, we change the CSS class of the element from "blue" to "red".

In short, JavaScript allows us to dynamically change the appearance and layout of web pages, making web pages richer and more interesting. Whether it's changing CSS styles, adding or removing elements, or interactive animation effects, we can do it all with JavaScript. If you are a web designer or want to learn web design, JavaScript is one of the essential skills.

The above is the detailed content of Explore how to use JavaScript to change CSS styles. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html 事件 dom 样式表

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Discuss how to implement ArrayList using JavaScriptNext article：Discuss how to implement ArrayList using JavaScript

Related articles

See more

• Problem in passing value from parent component to child component echarts in Vue
• Some thoughts on React this binding
• Django uses request to get the parameters sent by the browser
• DOM operation in JQuery - wrap
• Explanation of related content of prototype and prototype chain