JavaScript 为元素添加样式

2025年4月19日 | 阅读 4 分钟

JavaScript 最强大的功能之一是它能够更改网页中元素的样式。您可以根据用户输入或行为，使用 JavaScript 语言自定义元素的样式，从而维护动态设计风格。在本文中，您将学习如何使用 JavaScript 添加和修改 HTML 元素的样式。

1. 访问元素

在应用样式之前，您需要 HTML 元素，可以通过引用该元素来访问它。现在，在 JavaScript 中，有多种方法可以使用几种不同的方法来定位元素。

a) document.getElementById()

document.getElementById() 是一个内置的 JavaScript 函数，用于选择和操作具有唯一 ID 的 HTML 元素。这是最常用的 D.O.M（文档对象模型）方法之一。

语法

代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JTP Example</title>
  </head>
  <body>
    <h1 id="header">Hello, User</h1>
    <button id="changeTextBtn">Change Text</button>

    <script src="script.js"></script>
  </body>
</html>

JavaScript

// select the element by its id or some unique selector.
const headerElement = document.getElementById("header");
const buttonElement = document.getElementById("changeTextBtn");

// When we click the button, change the text of the header
buttonElement.addEventListener("click", function () {
  headerElement.textContent = "Welcome To JavaTpoint";
});

输出

点击按钮后

b) document.querySelector()

document.querySelector() 函数是一个 JavaScript 函数，用于查询 DOM 中与指定 CSS 选择器匹配的第一个元素。这是最强大、最灵活的方法之一，因为它允许使用任何有效的 CSS 选择器（包括类、ID、属性或元素类型）来选择元素。

语法

代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JTP</title>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 id="header">Welcome to JavaTpoint</h1>
    <p class="info">Hello Yashraj how are you.</p>
    <p class="info">Hello Rohit How are you.</p>
    <button id="highlightBtn">Highlight First Paragraph</button>

    <script src="script.js"></script>
  </body>
</html>

JavaScript

// selected the html elements using document.querySelector method
const header = document.querySelector("#header");
const firstParagraph = document.querySelector(".info");
const highlightButton = document.querySelector("#highlightBtn");

// you can use the event listner
highlightButton.addEventListener("click", function () {
  // we have changed the style of the first paragraph
  firstParagraph.classList.add("highlight");

  // when user click on button then header text will changed to this
  header.textContent = "Highlighted First Paragraph!";
});

输出

点击按钮后

c) document.querySelectorAll()

document.querySelectorAll() 方法是一个 JavaScript 函数，它根据提供的 CSS 选择器从文档对象模型 (DOM) 中选择所有匹配的元素。与只返回第一个匹配项的 document.querySelector() 不同，document.querySelectorAll() 返回一个包含所有匹配选择的元素的 NodeList。

语法

代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JTP</title>
    <style>
      .highlight {
        color: green;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>JavaTpoint</h1>
    <ul id="itemList">
      <li>Yashraj</li>
      <li>Navven</li>
      <li>Rohit</li>
      <li>Akash</li>
    </ul>
    <button id="highlightBtn">Highlight All Items</button>

    <script src="script.js"></script>
  </body>
</html>

JavaScript

// Query all list items and the button
const listItems = document.querySelectorAll("#itemList li");
const highlightButton = document.querySelector("#highlightBtn");

// Event listener to be added on button
highlightButton.addEventListener("click", function () {
  // Loop through each of the selected list items
  listItems.forEach((item) => {
    // Apply the 'highlight' class to every item
    item.classList.add("highlight");
  });
});

输出

点击按钮后

2. 修改内联样式

当我们访问元素时，可以使用 style 属性更改其 CSS。

更改背景颜色

element.style.backgroundColor 属性是 JavaScript DOM（文档对象模型）的一个组成部分，用于操作或获取 HTML 元素的背景颜色。它用于动态设置或获取颜色值，但它会访问特定元素的 background-color 属性。

语法

// we can set the background color using this property
element.style.backgroundColor = "color";

// it is used to get the background color
var bgColor = element.style.backgroundColor;

代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Changer</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #f4f4f9;
      }

      #colorBox {
        width: 200px;
        height: 200px;
        border: 2px solid #444;
        border-radius: 10px;
        margin-bottom: 20px;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: bold;
        color: #fff;
      }

      #colorBox:empty {
        color: #555;
        background-color: #e0e0e0;
      }

      button {
        padding: 10px 20px;
        margin: 5px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1rem;
        font-weight: bold;
        color: #fff;
        background-color: #555;
        transition: background-color 0.3s ease, transform 0.2s ease;
      }

      button:hover {
        background-color: #333;
        transform: scale(1.05);
      }

      #redBtn {
        background-color: #e74c3c;
      }

      #redBtn:hover {
        background-color: #c0392b;
      }

      #greenBtn {
        background-color: #2ecc71;
      }

      #greenBtn:hover {
        background-color: #27ae60;
      }

      #blueBtn {
        background-color: #3498db;
      }

      #blueBtn:hover {
        background-color: #2980b9;
      }
    </style>
  </head>
  <body>
    <div id="colorBox">No Color</div>
    <button id="redBtn">Red</button>
    <button id="greenBtn">Green</button>
    <button id="blueBtn">Blue</button>

    <script src="script.js"></script>
  </body>
</html>

JavaScript

// Query all list items and the button
const colorBox = document.getElementById("colorBox");
const redButton = document.getElementById("redBtn");
const greenButton = document.getElementById("greenBtn");
const blueButton = document.getElementById("blueBtn");

// Event listener to be added on button so that we can change background color
redButton.addEventListener("click", () => {
  colorBox.style.backgroundColor = "red";
  colorBox.textContent = "Red";
});

greenButton.addEventListener("click", () => {
  colorBox.style.backgroundColor = "green";
  colorBox.textContent = "Green";
});

blueButton.addEventListener("click", () => {
  colorBox.style.backgroundColor = "blue";
  colorBox.textContent = "Blue";
});

输出

点击按钮后

结论

使用 JavaScript 进行元素样式设置，从内联样式到切换 CSS 类，JavaScript 的多功能性为您的网页提供了动态样式控制。将这些技术与事件处理和响应式设计相结合，将您的 Web 开发提升到新的水平。

下一主题检查 JavaScript 中的字符串是否包含子字符串

JavaScript 为元素添加样式

1. 访问元素

a) document.getElementById()

c) document.querySelectorAll()

2. 修改内联样式

更改背景颜色

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 为元素添加样式

1. 访问元素

a) document.getElementById()

c) document.querySelectorAll()

2. 修改内联样式

更改背景颜色

结论

相关帖子

如何检查 JavaScript 中的空字符串

如何在 JavaScript 中将两个数字相加

如何刷新 JavaScript 中的页面

自调用函数 JavaScript

JavaScript 自动计算表单

如何获取 JavaScript 对象长度

如何在 JavaScript 中添加新行？

JavaScript console.table() 方法

在 JavaScript 中按字母顺序排序

Moment.Js 在 JavaScript 中的用法

订阅 Tpoint Tech