这几天学习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
评论前必须登录！
注册