JavaScript获取CSS内联样式和外联样式

DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。但是IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

案例代码如下所示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>原生JS实现jQuery淡入淡出效果</title><style type="text/css">#testBox {width: 175px;height: 175px;background-color: #009E94;opacity: 0.5;}</style><script type="text/javascript">window.onload = function() {var testBox = document.getElementById("testBox");var opacity = window.getComputedStyle ? window.getComputedStyle(testBox,null).opacity : testBox.currentStyle.opacity;console.log(opacity)}</script></head><body><div id="testBox"></div></body>
</html>

我们将其封装，封装好的代码如下所示。

window.onload = function() {var testBox = document.getElementById("testBox");var opacity = getStyle(testBox,"opacity");console.log(opacity)
}
function getStyle(obj, prop) {if(window.getComputedStyle) {return window.getComputedStyle(obj,null)[prop];} else if(obj.currentStyle) {return obj.currentStyle[prop];}return null;
}

总结：基于IE浏览器的非行内获取法：使用 obj.currentStyle["attr"]；基于非IE浏览器，如火狐谷歌等非行内获取法：使用window.getComputedStyle(obj)["attr"]

切记：非行内样式获取法，只能获取不能设置。

JavaScript获取CSS内联样式和外联样式相关推荐

如何用js获取外联css,内联外联CSS和JS
内联CSS 代码示例: 这里文字是红色. 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度 ...
你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
css 内联、外联和外部样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
css内联样式_如何覆盖内联CSS样式
css内联样式本文写于2009年,至今仍是我们最受欢迎的帖子之一. 如果您想了解有关CSS的更多信息,您可能会发现这篇有关CSS技术的文章对视网膜显示非常感兴趣. CSS的最强大功能之一就是层叠. ...
mysql 内联和外联的区别_内联查询与外联查询
概述在开发时,我们一般只进行单表查询,但有时候也会涉及到多表查询.内联查询和外联查询都是为了联合多张表进行信息查询.这里只是简单的说明几种联合查询如何使用,具体详细说明可以参看参考链接联合查询假 ...
CSS 5 CSS 内联元素和块状元素
CSS 文章目录 CSS 5 CSS 内联元素和块状元素 5.1 内联元素[inline] 5.2 块级元素[block] 5.3 内联元素与块级元素的区别 5.3.1 内联元素 5.3.2 块状 ...
css 内联元素浮动
css 内联元素浮动后, 会转为块元素 <!DOCTYPE html> <html lang="en"> <head><meta char ...
如何通过jQuery动态设置元素CSS的样式，以及HTML中CSS “内联式”、“嵌套式”、“外联式”使用方法
html元素使用CSS渲染标签的样式,可以通过内联式.嵌套式.外联式来将CSS样式添加到html中.有时候涉及到动态的参数,或者在事件中需要修改不同元素的CSS样式时,可以通过js获取目标元素,再其修 ...
css样式内联式，外联式，嵌入式
1.外联式样式(属于外部样式表) 特征: 1.有一个单独的CSS文件存在![如:001.css] 2.首先,通过[格式]→[样式表连接]与CSS文件[001.css]建立连接! 3.在合适的地方使用 ...
CSS内联样式的使用，吐血整理
前言本文主要是javascript和css方面的基础面试题,适合面试前以及平时复习食用. 基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack.git.node ...

JavaScript获取CSS内联样式和外联样式

JavaScript获取CSS内联样式和外联样式相关推荐

最新文章

热门文章