html引用外部js文件style的属性值

如果你想在 JavaScript 中访问外部 CSS 文件中的样式属性值，可以使用 getComputedStyle() 方法。这个方法返回一个对象，包含了指定元素的所有计算样式属性及其对应的值。

以下是一个获取某个元素的外部样式属性值的示例代码：

// 获取某个元素
var myElement = document.getElementById("myElement");

// 获取计算后的样式属性
var computedStyle = window.getComputedStyle(myElement);

// 获取属性值
var color = computedStyle.getPropertyValue("color");
var fontSize = computedStyle.getPropertyValue("font-size");

这个例子中，我们首先获取了一个 ID 为 "myElement" 的元素，然后使用 getComputedStyle() 方法获取了它的计算样式属性。最后，我们使用 getPropertyValue() 方法获取了 color 和 font-size 样式属性的值。

请注意，getComputedStyle() 方法返回的是一个只读对象，因此你不能直接修改它。如果你想修改一个元素的样式属性，应该使用元素的 style 属性。

相关问题

使用document 对象的集合属性styleSheets 只能访问HTML文档中的嵌入样式表，能访问链接的外部样式表吗

### 回答1：
使用 document 对象的 styleSheets 集合属性只能访问 HTML 文档中嵌入的样式表，无法访问通过链接引入的外部样式表。

要访问外部样式表，可以使用 document 对象的 getElementsByTagName() 方法来获取页面中所有的 link 元素，然后通过遍历 link 元素并检查它们的 rel 属性是否为 "stylesheet" 来确定哪些是样式表链接。例如：

var links = document.getElementsByTagName("link");
for (var i = 0; i < links.length; i++) {
  if (links[i].rel == "stylesheet") {
    // 这是一个样式表链接
  }
}

另外，在现代浏览器中，也可以使用 document 对象的 styleSheets 集合的 length 属性来获取样式表的数量，然后使用 item() 方法来访问每个样式表。例如：

var numStylesheets = document.styleSheets.length;
for (var i = 0; i < numStylesheets; i++) {
  var stylesheet = document.styleSheets.item(i);
  // 对 stylesheet 对象进行操作
}

这样就可以同时访问嵌入的样式表和通过链接引入的外部样式表了。

### 回答2：
使用document对象的集合属性styleSheets只能访问HTML文档中的嵌入样式表，不能直接访问链接的外部样式表。styleSheets属性可以返回一个StyleSheetList对象，该对象包含了HTML文档中所有样式表的引用，包括内联、内嵌和外部样式表。但是，要访问外部样式表中的规则以及声明属性，需要通过StyleSheet对象的方法和属性进行操作。

要访问外部样式表中的规则，可以使用styleSheets集合中的item()方法或下标索引来获取指定位置的StyleSheet对象，然后通过该对象的cssRules属性来访问其中的规则，使用length属性可以获取样式规则的数量。

要访问外部样式表中规则的声明属性，可以通过StyleSheet对象中的cssRules属性访问到样式规则，再使用规则对象中的style属性来获取具体的声明属性。例如，可以使用如下代码访问外部样式表中第一个规则的color属性值：

var stylesheet = document.styleSheets[0];
var rule = stylesheet.cssRules[0];
var color = rule.style.color;

需要注意的是，由于外部样式表可能存在跨域访问限制，所以需要确保页面和样式表来自同一个域名。而且由于styleSheets属性返回的是一个只读集合，所以无法直接修改外部样式表中的规则和属性，只能通过其他方法（如修改style元素或通过JavaScript动态创建样式）来实现样式的动态变化。