JavaScript获取外部CSS属性方法介绍

最新推荐文章于 2019-09-05 00:38:23 发布

Bird

最新推荐文章于 2019-09-05 00:38:23 发布

阅读量1.8k

点赞数 2

分类专栏： JavaScript 文章标签： css javascript stylesheet html div button

本文链接：https://blog.csdn.net/a352193394/article/details/7423801

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在HTML代码中，如果对于一个标签，你在其中写上style属性对其进行描述，这样的话，使用JS获取他的属性只需

要div.style.height就可以了。但是对于外部CSS就不能了，下面介绍外部CSS属性获取方法。

CSS如下

#div1{
	width: 500px;
	height: 200px;
	background-color: pink;
}

HTML如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../css/5.css" type="text/css"></link>
  
  <script type="text/javascript">
  		 function test(){
  		 	var div = document.getElementById("div1");
  		 	window.alert(div.offsetHeight);
  		 	window.alert(div.offsetWidth);
  		 }
  </script>
  </head>
  
  <body>
    <div id="div1">div1</div>
    <input type="button" οnclick="test();" value="测试">
  </body>
</html>

其实就是一句话div.offsetHeight这句话。很经典，Mark一下