获取内联和链接中的样式(js代码)

获取内联和链接中的样式可以通过DOM来完成。通常情况下，内联Style和link样式表都可以被获取。

获取内联样式可以使用element.style属性，该属性可以返回包含所有内联样式属性的对象。对象的各个属性可以使用点表示法访问，其值是CSS属性的字符串表示形式。例如：

<div id="myDiv" style="background-color: red; width: 300px; height: 200px;"></div>

const myDiv = document.getElementById("myDiv");
const backgroundColor = myDiv.style.backgroundColor; // "red"
const width = myDiv.style.width; // "300px"
const height = myDiv.style.height; // "200px"

如果想获取CSS样式表中的样式，可以使用getComputedStyle方法。该方法接受要获取样式的元素作为参数，返回一个包含所有计算后样式属性的对象。各个属性仍然可以使用点表示法访问，其值同样是CSS属性的字符串表示形式。例如：

<link rel="stylesheet" href="mystyle.css">
<div id="myDiv"></div>

const myDiv = document.getElementById("myDiv");
const computedStyle = getComputedStyle(myDiv);
const backgroundColor = computedStyle.backgroundColor; // "rgb(255, 0, 0)"
const width = computedStyle.width; // "auto"
const height = computedStyle.height; // "auto"

在上面的示例中，mystyle.css文件中可以定义#myDiv元素的样式，例如：

#myDiv {
    background-color: blue;
    width: 400px;
    height: 300px;
}

虽然内联样式和链接样式表都可以通过DOM获取，但是有一些细微的差别。

对于内联样式，element.style 只能获取到写在 HTML 结构中的内联样式，并不能获取到通过 JavaScript 动态添加的内联样式。而在 Firefox 浏览器中，computedStyle对象可以获取到通过 JavaScript 动态添加的内联样式。因此，为了能够更加准确地获取内联样式，通常我们会把样式放到 class 中，然后使用 getComputedStyle 方法获取计算后的样式。

另外，对于 link 标签里连接的样式表（如上例中的 mystyle.css），computedStyle方法也可以获取到。但是如果样式表没有加载完毕，计算出来的样式可能是不准确的。如果想要确保样式已经加载完毕才获取样式，可以监听 load 事件。例如，如果想在加载完毕后获取 #myDiv 的 width 属性，可以这样做：

<link rel="stylesheet" href="mystyle.css">
<div id="myDiv"></div>
<script>
    window.addEventListener('load', function() {
        const myDiv = document.getElementById("myDiv");
        const computedStyle = getComputedStyle(myDiv);
        const width = computedStyle.width; // "400px"
    });
</script>

在上面的示例中，等到样式表加载完毕后，才获取 #myDiv 的 width 属性。