参考资料

  1. HTML DOM 返回图像映射的某个区域的protocol 实例
  2. HTML DOM 返回图像映射的某个区域的hostname实例
  3. HTML DOM 节点列表长度
  4. HTML DOM 属性
  5. HTML DOM 返回图像映射的某个区域的href 实例
  6. HTML DOM 返回一个button的type 实例
  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：文本格式化元素样式布局粗体斜体下划线动态外观

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