个人博客
专注IT梦想的地方

如何用getComputedStyle方法获取style元素中的属性值

这几天学习Web一些代码觉得刚开始会比java要简单一些,而且上手很快,直接编写出来后就可以用浏览器进行测试,并且还能检查一些兼容的问题,所以进入这行来说还是非常快的。但是遗憾的是正是由于浏览器的众多,所以导致了很多兼容的问题需要解决,那我个人目前对于兼容问题来说还处于一个脑袋大的严重结果上面,当然,我自己也在努力嘛。

我本来想实现的一个页面效果就是一个通过js代码来实现动态的将一个100×100像素的小方框通过动画的效果自动扩大成300×300像素的中型边框,所以我个人还是非常期待的。

但是在代码编写过程中还是出现了一些问题,最后又是通过度娘来解决的。

问题在哪呢?因为我还没有学到getComputedStyle方法,所以我不知道通过什么方式来获得div标签中已经定义过的style样式属性,所以刚开始的时候我使用的方法还是getAttribute,然后我怎么用还是不行,最后在网上搜索了一下,看到有网友分享可以使用getComputedStyle方法来获取,并且不仅可以读取,还能写入,所以就测试了一下,发现是真的可以,而且最终还用getComputedStyle方法来解决了我想要完成的效果。

下面是HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示页面</title>
<style type="text/css">
.div_1{height:100px;width:100px;border:#ff0000 1px solid;}
.text{display:inline-block;}
</style>
</head>

<body>
<script type="text/javascript">
  var oDivNode;
  function textDemo(){
	 oDivNode= document.getElementById('div1');
		setInterval("abcDemo()",10);
  }
  				
  function abcDemo(){
	  			var oStyleHeight = getComputedStyle(oDivNode,null).height;
				var oStyleWidth = getComputedStyle(oDivNode,null).width;
				var iStyleHeight = parseInt(oStyleHeight);
				var iStyleWidth = parseInt(oStyleWidth);
				if(iStyleHeight<300||iStyleWidth<300){
				oDivNode.style.height = ++iStyleHeight+'px';
				oDivNode.style.width = ++iStyleWidth+'px';
				}
  }
  </script>
  <input type="button" value="提交测试" onclick="textDemo()"/>
  <hr/>
  <div class="div_1" id="div1">演示</div>
</body>
</html>

实现的效果Demo页面:http://www.asni.cn/wp-content/uploads/2014/08/yddemo.html

赞(1) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » 如何用getComputedStyle方法获取style元素中的属性值

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏