Javascript 简明教程

JavaScript - Changing CSS

Changing CSS with JavaScript

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

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

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

Syntax

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

element.style.property = value;

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

Example: Changing the style of the HTML element

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

<!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 属性。

我们使用 'backgroundColor’、'color’，'fontSize’ 和 'width' 属性来更改 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

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

Example

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

<!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 元素的样式。

<!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。你可以使用变量分配值。

Example

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

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

<!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>