参考资料

  1. HTML DOM 返回一个button的value 实例
  2. HTML DOM 返回图像映射的某个区域的href 实例
  3. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
  4. HTML DOM 根节点childNodes 和 nodeValue
  5. HTML DOM 返回和设置链接的hreflang属性实例
  6. HTML DOM 返回一个iframe中的name属性的值
  7. HTML DOM 节点列表长度
  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：样式格式化元素属性方法动态容器颜色事件示例