JS获取CSS样式（style/getComputedStyle/currentStyle）资源-CSDN下载

183 浏览量 2020-11-23 14:23:08 上传评论收藏 50KB PDF 举报

CSS的样式分为三类：内嵌样式：是写在Tag里面的，内嵌样式只对所有的Tag有效。内部样式：是写在HTML的里面的，内部样式只对所在的网页有效。外部样式表：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration]) currentStyle是IE浏览器的一个属性，返回的是CSS样式对象 el 在JavaScript中，获取CSS样式的方法主要有两种：`element.style` 和 `window.getComputedStyle()` 或 `element.currentStyle`（仅IE浏览器）。这些方法可以帮助开发者在运行时动态地读取或修改页面元素的样式。 CSS样式可以分为三类： 1. **内嵌样式**：直接写在HTML标签内的`style`属性中，比如`<div id="tag" style="...">`。这种样式只对该特定的标签生效。 2. **内部样式**：存在于HTML文档的`<head>`标签中的`<style>`标签内，如`<style>#test {...}</style>`。这种样式对整个HTML文档有效。 3. **外部样式表**：将CSS规则存储在`.css`文件中，并通过`<link rel="stylesheet" href="styles.css">`链接到HTML文档。这种方式适用于多个页面共享相同的样式。对于JavaScript获取样式： 1. **`element.style`**：此属性返回一个CSS样式对象，仅包含元素的内嵌样式。如果元素没有内嵌样式，返回的是一个空对象。例如： ```javascript var tag = document.getElementById("tag"); console.log(tag.style.backgroundColor); // 输出："pink" ``` 2. **`element.currentStyle`**：这是IE浏览器特有的属性，返回一个CSS样式对象，包含了元素的所有样式，包括内联样式和从样式表继承的样式。但在非IE浏览器中，这个属性会返回`undefined`。 3. **`window.getComputedStyle(element, [pseudoElement])`**：这是一个通用方法，用于获取元素的所有计算后的样式，包括那些继承自父元素和浏览器默认的样式。在非IE浏览器中，它返回一个CSS样式对象。在Gecko 2.0（Firefox 4及更高版本）之前，需要传入第二个参数`pseudoElement`来指定伪类，但现在可以省略。例如： ```javascript console.log(window.getComputedStyle(test)); // 返回一个CSSStyleDeclaration对象 ``` 使用这些方法，你可以获取到元素的宽度、高度、背景色、边距等任何CSS属性。例如，获取`#test`元素的宽度： ```javascript var testWidth = window.getComputedStyle(test).width; console.log(testWidth); // 输出元素的实际宽度，如："500px" ``` 值得注意的是，`getComputedStyle`返回的值通常是带有单位的字符串，如"500px"，而不是数字。如果需要数值，可以通过转换处理。在实际开发中，根据浏览器兼容性和需求，合理选择`element.style`、`element.currentStyle`和`getComputedStyle`来获取CSS样式，是实现动态页面效果和交互的关键。同时，了解不同类型的CSS样式和它们的作用范围，能帮助开发者更好地管理和控制页面的视觉表现。

资源推荐

资源详情

资源评论