HTML | DOM 样式引用属性

在 HTML 中，可以通过样式引用属性来为元素添加样式。 在 DOM 中，我们可以通过 JavaScript 来引用和修改这些样式。

HTML 样式引用属性

HTML 样式引用属性可以为元素添加内联样式或链接到外部样式表。它们是：

• style：为元素添加内联样式。

  <div style="color: red;">这是一个红色的 div 元素。</div>
  

• link：链接到外部样式表。

  <link rel="stylesheet" type="text/css" href="styles.css">
  

DOM 样式引用属性

在 DOM 中，我们可以使用以下属性来引用和修改元素的样式。

• style：可以读取和设置元素的内联样式。

  // 读取
  let element = document.getElementById('demo');
  let color = element.style.color;
  console.log(color); // 输出元素的颜色
  
  // 设置
  element.style.backgroundColor = "yellow";
  

• className 和 classList：可以读取和设置元素的 CSS 类名。

  // 读取
  let element = document.getElementById('demo');
  let className = element.className;
  console.log(className); // 输出元素的 CSS 类名
  
  // 设置
  element.className = "new-class";
  
  // classList API
  element.classList.add("new-class"); // 添加类名
  element.classList.remove("old-class"); // 移除类名
  element.classList.toggle("new-class"); // 如果元素没有该类名，则添加；否则删除
  element.classList.contains("new-class"); // 检查元素是否包含某个类名，返回布尔值
  

• getComputedStyle()：返回应用在元素上的所有 CSS 属性的值。

  let element = document.getElementById('demo');
  let style = window.getComputedStyle(element);
  console.log(style.color); // 输出元素的颜色
  

• offsetHeight 和 offsetWidth：返回元素的高度和宽度（包括边框、内边距和滚动条）。

  let element = document.getElementById('demo');
  console.log(element.offsetHeight); // 输出元素的高度
  console.log(element.offsetWidth); // 输出元素的宽度
  

• offsetTop 和 offsetLeft：返回元素的左上角相对于父元素的位置。

  let element = document.getElementById('demo');
  console.log(element.offsetTop); // 输出元素距离父元素顶部的距离
  console.log(element.offsetLeft); // 输出元素距离父元素左边的距离
  

以上是一些常用的 DOM 样式引用属性。对于更多属性和方法的使用，请查阅相关文档。