参考资料

  1. HTML DOM 返回一个iframe中的marginwidth属性的值
  2. HTML DOM 返回一个button的type 实例
  3. HTML DOM 属性
  4. HTML DOM 返回一个表单中所有元素的value 实例
  5. HTML DOM 改变iframe的高度和宽度
  6. HTML DOM 设置image的hspace和vspace属性
  7. HTML DOM为表格指定规则
  8. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例

HTML DOM 元素格式化

简介

HTML DOM 元素格式化是指通过 DOM 操作和 CSS 样式来改变 HTML 元素的外观和布局。

常用格式化标签

  • <b>: 粗体文本

  • <i>: 斜体文本

  • <u>: 下划线文本

  • <strong>: 强调文本(通常显示为粗体)

  • <em>: 强调文本(通常显示为斜体)

  • <mark>: 标记/高亮文本

  • <small>: 小号文本

  • <del>: 删除线文本

  • <ins>: 插入文本(通常带下划线)

  • <sub>: 下标文本

  • <sup>: 上标文本

基本用法

<p>这是<b>粗体</b>文本</p>
<p>这是<i>斜体</i>文本</p>
<p>这是<u>下划线</u>文本</p>

CSS 扩展格式化

通过 CSS 可以扩展更多格式化选项：

/* 文本颜色 */
.text-red {
  color: red;
}

/* 背景色 */
.bg-yellow {
  background-color: yellow;
}

/* 字体大小 */
.font-large {
  font-size: 24px;
}

/* 文本对齐 */
.text-center {
  text-align: center;
}

/* 边框 */
.bordered {
  border: 1px solid black;
  padding: 10px;
}

综合示例

<!DOCTYPE html>
<html>
<head>
<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
  }
  .shadow {
    text-shadow: 2px 2px 4px #888;
  }
</style>
</head>
<body>

<p>这是<mark>默认高亮</mark>文本</p>
<p>这是<span class="highlight">自定义高亮</span>文本</p>
<p class="shadow">带阴影的文本</p>
<p style="font-family: Arial; color: blue;">内联样式文本</p>

</body>
</html>

DOM 操作格式化

通过 JavaScript 动态修改元素样式：

// 获取元素
let elem = document.getElementById("myElement");

// 修改样式
elem.style.color = "red";
elem.style.fontSize = "20px";
elem.style.backgroundColor = "#f0f0f0";

// 添加/移除类
elem.classList.add("highlight");
elem.classList.remove("old-class");

功能总结

  1. 文本样式控制(颜色、大小、粗细等)

  2. 布局控制(边距、对齐、浮动等)

  3. 视觉效果(阴影、圆角、过渡等)

  4. 响应式设计(媒体查询适配不同设备)

  5. 动态样式修改(通过JavaScript)

TAG：文本格式化元素样式布局粗体斜体下划线动态外观