javascript 获取非行间样式

最新推荐文章于 2023-02-19 20:51:04 发布

青天诀

最新推荐文章于 2023-02-19 20:51:04 发布

阅读量518

点赞数

分类专栏： Web前端文章标签： Web前端

本文链接：https://blog.csdn.net/u012193330/article/details/41123313

版权

Web前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

html页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style>
			#div1{
				width: 200px; height: 200px; background: red;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

<script>
var oDiv=document.getElementById("div1");
alert(oDiv.style.width);
</script>

oDiv.style.width获取的只能是行间样式，所以这时得到的是空。

如何获取外部样式呢

1. 使用obj.currentStyle.name

它仅适用于IE，不兼容火狐，谷歌

2. 使用 getComputedStyle(obj,null).name

它仅适用于火狐，谷歌，对IE不起作用

可以通过如下代码，对各个浏览器兼容

<script>
function getStyle(obj,name)
{
 if(obj.currentStyle)
 {
    return (obj.currentStyle[name]);//IE
 } 
 else
 {
   return (getComputedStyle(obj,null)[name]);//FireFox
 }
}
window.οnlοad=function(){
var oDiv1=document.getElementById("div1");
alert(getStyle(oDiv1,"backgroundColor"));

};
</script>

青天诀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 获取非行间样式

html页面代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project #div1{ width: 200px; height: 200px; background: red;
复制链接

扫一扫