Javascript 简明教程

JavaScript - Changing CSS

Changing CSS with JavaScript

JavaScript 允许您动态地更改 HTML 元素的 CSS 。

JavaScript allows you to change the CSS of the HTML element dynamically.

当 HTML 在浏览器中加载时，它会创建一个 DOM tree 。 DOM tree 以对象格式包含每个 HTML 元素。此外，每个 HTML 元素对象都包含 ' style ' 对象作为属性。此处，一个 ' style ' 对象包含颜色、背景颜色等各种属性，以更改或获取元素的样式。

When HTML gets loaded in the browser, it creates a DOM tree. The DOM tree contains each HTML element in the object format. Furthermore, each HTML element object contains the 'style' object as a property. Here, a 'style' object contains various properties like color, backgroundcolor, etc., to change or get the element’s style.

因此，您可以使用 ' style ' 对象的各种属性来更改特定 HTML 元素的样式。

So, you can use various properties of the 'style' object to change the style of the particular HTML element.

Syntax

按照以下语法更改 HTML 元素的 CSS。

Follow the syntax below to change the CSS of the HTML element.

element.style.property = value;

在上述语法中，“元素”是您需要从 DOM 树中访问的 HTML 元素。“属性”是一个 CSS 属性，“值”可以是静态的或动态的。

In the above syntax, 'element' is an HTML element, which you need to access from the DOM tree. The 'property' is a CSS property, and the 'value' can be static or dynamic.

Example: Changing the style of the HTML element

我们在下面的代码中将初始样式应用于 div 元素。在 JavaScript 中，我们使用样式对象的 'backgroundColor' 属性更改 div 元素的背景颜色。

We have applied the initial style to the div element in the code below. In JavaScript, we change the div element’s background color using the style object’s 'backgroundColor' property.

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: blue;
      width: 700px;
      height: 100px;
      color: white;
    }
  </style>
</head>

<body>
  <div id = "square"> Changing the color of this Div. </div> <br>
  <button onclick="changeColor()"> Change Color </button>
  <script>
    function changeColor() {
      let square = document.getElementById('square');
      square.style.backgroundColor = 'red';
    }
  </script>
</body>
</html>

Example: Adding multiple styles to a single HTML element

在下面的代码中，我们在 changeStyle() 函数中更改 <div> 元素的多个 CSS 属性。

In the below code, we change multiple CSS properties of the <div> element in the changeStyle() function.

我们使用 'backgroundColor’、'color’，'fontSize’ 和 'width' 属性来更改 CSS。

We use the 'backgroundColor’, 'color’, 'fontSize’, and 'width' properties to change the CSS.

<!DOCTYPE html>
<html>
<body>
  <div id = "square"> Changing the style of this Div. </div> <br>
  <button onclick = "changeStyle()"> Change color </button>
  <script>
    function changeStyle() {
      document.getElementById('square').style.backgroundColor = 'red';
      document.getElementById('square').style.color = "white";
      document.getElementById('square').style.fontSize = "25px";
      document.getElementById('square').style.width = "700px";
    }
  </script>
</body>
</html>

Changing Style of the Element When Event Triggers

您还可以在特定事件触发时更改元素的样式。

You can also change the style of the element when a particular event triggers.

Example

在下面的代码中，我们向 <div> 元素添加了 'click' 事件。当用户单击按钮时，它将更改 div 元素的背景颜色。

In the below code, we added the 'click' event to the <div> element. When users click the button, it changes the background color of the div element.

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 700px;
      height: 100px;
      color: white;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id = "square"> Click Me </div> <br>
  <script>
    const square = document.getElementById('square');
    square.addEventListener('click', () => {
      square.style.backgroundColor = 'green';
      square.style.fontSize = "25px";
    });
  </script>
</body>
</html>

Example

在下面的代码中，我们在 div 元素上添加了“hover”事件。当鼠标光标进入和离开 div 元素时，它都会改变 div 元素的样式。

In the below code, we added the 'hover' event on the div element. When the mouse cursor enters and leaves the div element, it changes the style of the div element.

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 700px;
      height: 100px;
      color: white;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id = "square"> Hover Me </div> <br>
  <script>
    const square = document.getElementById('square');
    square.addEventListener('mouseenter', () => {
      square.style.backgroundColor = 'green';
      square.style.fontSize = "25px";
    });
    square.addEventListener('mouseleave', () => {
      square.style.backgroundColor = 'orange';
      square.style.fontSize = "initial";
    });
  </script>
</body>
</html>

Changing CSS of HTML elements Dynamically

你还可以动态改变 HTML 元素的 CSS。你可以使用变量分配值。

You can also change the CSS of the HTML element dynamically. You can assign values using the variables.

Example

在下面的代码中，我们给 <div> 元素添加了默认样式。

We have added the default style to the <div> element in the code below.

我们也创建了多个单选按钮。当用户选择任意单选按钮时，它都会相应地改变 div 元素的样式。

Also, we have created multiple radio buttons. When users select any radio button, it changes the style of the div element accordingly.

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    width: 700px;
    height: 100px;
    color: white;
    background-color: blue;
  }
</style>
</head>
<body>
<div><p id = "square">Select any of the following colors to change the background color</p></div>
<div>Yellow: <input type = "radio" id = "yellow" name = "color"></div>
<div>Green: <input type = "radio" id = "green" name = "color"></div>
<div>Red: <input type = "radio" id = "red" name = "color"></div>
<script>
  let square = document.getElementById('square');
  //    Changing the style when radio button changes
  let colors = document.getElementsByName('color');
  for (let i = 0; i < colors.length; i++) {
    colors[i].addEventListener('change', function () {
      square.style.backgroundColor = this.id;
    });
 }
</script>
</body>
</html>