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>Hello World!</div>
<button>变成红色</button>
<button>变成蓝色</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!