您的位置：首页 > Web前端 > JavaScript

20150912 javascript事件-获取样式

2015-09-12 16:41 645 查看

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>

#div1{widht：200px;height:200px; background:#f00; border:4px solid black;}</style>

<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onclick=function(){
startMove();
}

}
var timer=null;
function startMove(){
clearInterval(timer);
timer=setInterval(function(){

var oDiv=document.getElementById("div1");
oDiv.style.width=oDiv.offsetWidth-1+"px";
},50)
}

</script>

</head>
<body>
<div id="div1"></div>
</body>
</html>

问题一：var timer=null 必须放在全局定义，函数内部定义无效果，为什么？
　　思考结果：因为，每一次点击div，都会另外开启一个定时器，而在函数内部定义timer，只是一个局部变量timer，无法影响已经开启的timer，所以需要将timer定义在全局，以便所有定时器都共用这一个timer

问题二.为什么增加1像素边框后，div未按预期的逐渐减小，而是逐渐增大呢？
　　因为：offsetWidht值是指div的宽度加上它的边（widht+border），所以：计时器开始计时第一次，将offsetWidth值-1后，实际将div的宽度变为了201px;然后依次类推，每次都会增加1像素，和原本期望的结果恰好相反。
　　解决办法：将div的widht值改为行内样式，即<div id="div1" style="widht:200px">,同时修改代码 oDiv.style.width=oDiv.offsetWidth-1+"px"; 改为：oDiv.style.width=parseInt(oDiv.style.width)-1+"px";
　　关键点将offsetWidth值替换为oDiv.style.width。
　　

修改代码部分代码如下:

<style>
#div1{height:200px; background:#f00; border:4px solid black;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onclick=function(){
startMove();
}

}
var timer=null;
function startMove(){
clearInterval(timer);
timer=setInterval(function(){
var oDiv=document.getElementById("div1");
oDiv.style.width=parseInt(oDiv.style.width)-1+"px";
},50)
}
</script>
</head>
<body>
<div id="div1" style="width:200px"></div>
</body>

但是带来新的问题：无法将所有样式都写在行内并在js中进行获取。

解决办法：使用getComputedStyle()和currentStyle来解决该办法。

　　　　封装一个getStyle()的函数，用来获取样式中的任意属性

最终代码如下<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>获取样式</title>
<style>
#div1{width:200px;height:200px; background:#f00; border:10px solid black;  font-size:6px; color:white;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onclick=function(){
startMove();
}

}
var timer=null;
function startMove(){
clearInterval(timer);
timer=setInterval(function(){

var oDiv=document.getElementById("div1");
oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+"px";
//任意属性的变化，在这里都可以进行添加
},50)
}
//封装好的获取样式的函数
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//兼容ie
}
else{
return getComputedStyle(obj,false)[attr];//兼容ff
}
}
</script>
</head>
<body>
<div id="div1">font-size</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航