JavaScript获取css行间样式,内连样式和外链样式的简单方法

沃梦达教程前端开发

2024-04-03 9

获取CSS行间样式、内嵌样式和外链样式的方法分别为：

获取CSS行间样式、内嵌样式和外链样式的方法分别为：

行间样式：element.style，通过这个属性获取到的是指定元素在style属性中设置的样式；
内嵌样式：window.getComputedStyle(element, [pseudo])，通过这个方法获取所有的计算样式；
外链样式：通过<link>标签引入的外部CSS文件。

示例1：获取行间样式

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="example" style="width: 200px; height: 100px; background-color: blue;"></div>
  <script>
    const example = document.getElementById('example');
    console.log(example.style.width); // 获取行间样式width的值
    console.log(example.style.height); // 获取行间样式height的值
    console.log(example.style.backgroundColor); // 获取行间样式backgroundColor的值
  </script>
</body>
</html>

在这个示例中，我们使用了style属性来获取元素example的行间样式属性，然后通过console.log()方法输出了它们的值。由于行间样式是在元素标签中直接设置的，所以我们可以直接通过style属性来访问它。

示例2：获取内嵌样式

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 50px;
      background-color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="example"></div>
  <script>
    const example = document.getElementById('example');
    const exampleStyle = window.getComputedStyle(example, null);
    console.log(exampleStyle.width); // 获取宽度
    console.log(exampleStyle.height); // 获取高度
    console.log(exampleStyle.backgroundColor); // 获取背景色
    console.log(exampleStyle.fontSize); // 获取字体大小
  </script>
</body>
</html>

在这个示例中，我们创建了一个div元素，该元素的样式在CSS样式表中定义，然后使用了window.getComputedStyle()方法来获取所有计算样式，然后通过console.log()方法输出了所有属性的值。由于内嵌样式是通过CSS样式表中定义的，我们需要使用window.getComputedStyle()方法来获取所有计算样式。

简要概括了如何获取行间样式、内嵌样式和外链样式的方法和应用场景，如果还有其他问题，欢迎咨询。