DOM CSS

JavaScript HTML DOM - 更改 CSS

HTML DOM 允许 JavaScript 动态更改 HTML 元素的样式。这可以通过直接操作内联样式或管理 CSS 类来实现。

更改内联 HTML 样式

你可以使用元素对象的 style 属性来更改 HTML 元素的内联样式。语法如下：

element.style.property = ‘newValue’;

注意，带有连字符的 CSS 属性（例如 background-color）在 JavaScript 中会被转换为驼峰命名法（camelCase，例如 backgroundColor）。

以下示例更改了 <p> 元素的文本颜色和字体大小：

<!-- HTML： -->
<!-- <p id="myParagraph">Hello World!</p> -->

<script>
  const pElement = document.getElementById("myParagraph");
  if (pElement) {
    pElement.style.color = "blue";
    pElement.style.fontSize = "20px";
    pElement.style.backgroundColor = "lightgray"; // 驼峰命名法的示例
  }
</script>

<!-- 要查看实际效果，你需要一个这样的 HTML 元素：
<p id="myParagraph">Hello World!</p>
<p>上面的段落可以通过脚本进行样式设置。</p> -->

管理 CSS 类（推荐实践）

一种更健壮且易于维护的更改样式的方法是添加或删除 CSS 类。这使得你的 CSS 规则保留在样式表中，而 JavaScript 则专注于逻辑。

使用 classList 属性：

• element.classList.add('className'): 添加一个类。
• element.classList.remove('className'): 移除一个类。
• element.classList.toggle('className'): 如果类不存在则添加，如果存在则移除。
• element.classList.contains('className'): 检查类是否存在（返回 true/false）。

示例：

/* 在你的 <style> 标签或 .css 文件中的 CSS 代码： */
/*
.highlight {
  background-color: yellow;
  font-weight: bold;
}
.text-large {
  font-size: 24px;
}
*/

// JavaScript:
// const myDiv = document.getElementById('contentDiv');
// if (myDiv) {
//   myDiv.classList.add('highlight');
//   myDiv.classList.add('text-large');
//   // 稍后移除一个类：
//   // myDiv.classList.remove('highlight');
//   // 切换一个类：
//   // myDiv.classList.toggle('text-large');
// }

// 配合使用的 HTML 示例：
// <div id="contentDiv">这段内容可以通过添加类来设置样式。</div>

使用事件触发样式更改

HTML DOM 允许你在事件发生时执行 JavaScript 代码，例如按钮点击、鼠标悬停或页面加载。现代实践使用 addEventListener。

此示例在按钮被点击时更改 <h1> 元素的样式：

<!-- HTML： -->
<!--
<h1 id="mainHeading">My Dynamic Heading</h1>
<button id="styleButton">Change Style</button>
-->

<script>
  const heading = document.getElementById('mainHeading');
  const button = document.getElementById('styleButton');

  if (heading && button) {
    button.addEventListener('click', function() {
      // 使用内联样式更改
      // heading.style.color = 'red';
      // heading.style.fontFamily = 'Arial, sans-serif';

      // 或者，更好地，通过切换类
      // CSS：.styled-heading { color: red; font-family: Arial, sans-serif; }
      heading.classList.toggle('styled-heading');
    });
  }
</script>

更多示例：可见性

如何使元素可见或不可见：

• element.style.display = 'none'; （隐藏元素并将其从文档布局流中移除）。
• element.style.display = 'block'; （或者 inline、flex 等，再次显示它，恢复其原始显示类型或设置新的类型）。
• element.style.visibility = 'hidden'; （隐藏元素，但它仍在布局中占据空间）。
• element.style.visibility = 'visible'; （使元素再次可见）。
• 使用 hidden 属性（推荐用于语义化隐藏）：element.hidden = true; 或 element.hidden = false; 这通常通过浏览器样式表设置 display: none;。

// const targetElement = document.getElementById('secretMessage');
// if (targetElement) {
//   // 用于隐藏：
//   // targetElement.style.display = 'none';
//   // 或者
//   targetElement.hidden = true;

//   // 稍后显示：
//   // targetElement.style.display = 'block'; // （假设它是一个块级元素）
//   // 或者
//   // targetElement.hidden = false;
// }

HTML DOM Style 对象参考

有关通过 element.style 对象访问的所有 CSS 属性及其 JavaScript 驼峰命名法对应项的完整列表，请参考 MDN Web Docs：CSS 属性参考 和 DOM Style 对象。