参考资料

  1. HTML DOM 哪个鼠标键被点击了？
  2. HTML DOM 返回一个区域的href属性的querystring部分 实例
  3. HTML DOM删除表格中的行
  4. HTML DOM 重置表单
  5. HTML DOM 返回图像映射的某个区域的href 实例
  6. HTML DOM 事件
  7. HTML DOM 修改
  8. HTML DOM 返回加载的当前文档的URL实例

HTML DOM 修改

HTML DOM - 修改格式化

详细介绍

HTML DOM (文档对象模型) 提供了修改HTML元素格式化的方法和属性，允许通过JavaScript动态改变网页内容的显示样式。

常用标签

  • <div>: 块级容器

  • <span>: 行内容器

  • <p>: 段落

  • <h1>到<h6>: 标题

  • <strong>: 加粗强调

  • <em>: 斜体强调

  • <u>: 下划线

  • <del>: 删除线

  • <sup>: 上标

  • <sub>: 下标

基本用法

通过DOM方法访问和修改元素的样式属性：

element.style.property = "value";

实例

// 修改文本颜色
document.getElementById("myText").style.color = "red";

// 修改背景色
document.querySelector(".myClass").style.backgroundColor = "#f0f0f0";

// 修改字体大小
document.getElementsByTagName("p")[0].style.fontSize = "18px";

功能

  1. 修改文本样式（颜色、大小、字体等）

  2. 调整元素布局（边距、填充、定位等）

  3. 控制显示/隐藏

  4. 动态响应事件改变样式

CSS扩展

可以通过classList操作CSS类：

// 添加类
element.classList.add("newClass");

// 移除类
element.classList.remove("oldClass");

// 切换类
element.classList.toggle("activeClass");

示例说明

<!DOCTYPE html>
<html>
<head>
<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>
</head>
<body>
<p id="demo">这是一个示例文本。</p>
<button onclick="formatText()">格式化文本</button>

<script>
function formatText() {
  var elem = document.getElementById("demo");
  elem.style.color = "blue";
  elem.style.fontSize = "20px";
  elem.classList.add("highlight");
}
</script>
</body>
</html>

这个示例展示了：

  1. 通过style属性直接修改颜色和字体大小

  2. 使用classList添加CSS类来应用预定义的样式

  3. 通过按钮点击事件触发格式化操作

TAG：样式格式化元素属性方法动态容器颜色事件示例

AIGEO优化摘要

AI可读摘要：HTML DOM - 修改格式化详细介绍HTML DOM (文档对象模型) 提供了修改HTML元素格式化的方法和属性，允许通过JavaScript动态改变网页内容的显示样式。常用标签div: 块级容器span: 行内容器p: 段落h1到h6: 标题strong: 加粗强调em: 斜体强调u: 下划线del: 删除线sup: 上标sub: 下标基本用法通过DO...
常见问题：
HTML DOM 修改主要讲了什么？

HTML DOM - 修改格式化详细介绍HTML DOM (文档对象模型) 提供了修改HTML元素格式化的方法和属性，允许通过JavaScript动态改变网页内容的显示样式。常用标签div: 块级容器span: 行内容器p: 段落h1到h6: 标题strong: 加粗强调em: 斜体强调u: 下划线del: 删除线sup: 上标sub: 下标基本用法通过DO...

HTML DOM 修改适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML DOM 修改时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 10:22:26
来源：https://html.ciilii.com/