参考资料

  1. HTML DOM 导航节点关系
  2. HTML DOM 创建一个链接指向一个低分辨率的image
  3. HTML DOM获得有下拉列表的表单的ID
  4. HTML DOM shift键被按下了吗？
  5. HTML DOM 返回文档中第一个图像的ID
  6. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  7. HTML DOM 修改
  8. HTML DOM 返回一个iframe中的frameborder属性的值

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：样式格式化元素属性方法动态容器颜色事件示例