参考资料

  1. HTML DOM一个行的innerHTML
  2. HTML DOM 方法
  3. HTML DOM对单个单元格的内容垂直对齐
  4. HTML DOM shift键被按下了吗？
  5. HTML DOM 返回图像映射的某个区域的hostname实例
  6. HTML DOM 事件
  7. HTML DOM 对image排版
  8. HTML DOM document.write() 方法

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。