参考资料

  1. HTML DOM 哪个元素被按下了？
  2. HTML DOM一个行的innerHTML
  3. HTML DOM 返回一个iframe中的longdesc属性的值
  4. HTML DOM 返回一个锚的名字 实例
  5. HTML DOM 对iframe排版
  6. HTML DOM 返回图像映射的某个区域的shape 实例
  7. HTML DOM 返回一个区域的href属性的锚部分实例
  8. HTML DOM 重置表单

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