Home > Developer > JavaScript
<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<style>
#div1 {widht:200px;height:200px; background: #f00; border:4px solid black;} </ style >
<Script>window.onload=function(){ varOdiv=document.getElementById ("Div1"); Odiv.onclick=function() {startmove (); } } var timer=null; functionStartmove () {clearinterval (timer); Timer=SetInterval (function(){ varOdiv=document.getElementById ("Div1");odiv.style.width=odiv.offsetwidth-1+ "px"; }, -) }
</script>
<body>
<div id= "Div1" ></div>
</body>
Problem one: The Var timer=null must be placed in the global definition, the function internal definition has no effect, why?
Thinking result: Because, every time you click on a div, will open another timer, and inside the function defined timer, just a local variable timer, can not affect the timer has been turned on, so you need to define the timer in the global, so that all timers share this timer
Two. Why did the div not gradually decrease as expected, but gradually increase when the 1 pixel border was added?
Because: the OFFSETWIDHT value refers to the width of the DIV plus its edge (Widht+border), so: The timer starts the first time, the offsetwidth value-1, the actual width of the div into 201px, and so on, each time will be increased by 1 pixels, Contrary to the expected result.
Workaround: Change the widht value of div to inline style, i.e. <div id= "Div1" style= "widht:200px", and modify code odiv.style.width=odiv.offsetwidth-1+ "PX"; instead:odiv.style.width=parseint (oDiv.style.width) -1+ "px";
Key points replace the offsetwidth value with ODiv.style.width.
Modify the Code section code as follows:
<style>#div1{Height:200px;background:#f00;Border:4px solid Black;}</style><Script>window.onload=function(){ varOdiv=document.getElementById ("Div1"); Odiv.onclick=function() {startmove (); } }varTimer=NULL;functionStartmove () {clearinterval (timer); Timer=SetInterval (function(){ varOdiv=document.getElementById ("Div1"); oDiv.style.width =parseint (oDiv.style.width)-1+"px" ; }, -) }</Script></Head><Body><DivID= "Div1" style= "width:200px" ></Div></Body>
But it brings new problems: You can't write all the styles in a row and get them in JS.
Workaround: Use getComputedStyle () and Currentstyle to resolve this approach.
Encapsulates a function of GetStyle () to get any property in a style
The final code is as follows <! DOCTYPE HTML >
<HTML><Head><MetaCharSet= "Utf-8"><title>Get style</title><style>#div1{width:200px;Height:200px;background:#f00;Border:10px solid Black;font-size:6px;Color: White;}</style><Script>window.onload=function(){ varOdiv=document.getElementById ("Div1"); Odiv.onclick=function() {startmove (); } }varTimer=NULL;functionStartmove () {clearinterval (timer); Timer=SetInterval (function(){ varOdiv=document.getElementById ("Div1"); ODiv.style.width=parseint (GetStyle (Odiv,'width'))-1+"px";//Any property changes, can be added here }, -) }//encapsulated function to get the style function getStyle (obj,attr) { if(obj.currentstyle) { return o BJ.CURRENTSTYLE[ATTR]; // compatible with IE } else{ return getcomputedstyle (obj,false) [attr]; // compatible with FF } }</Script></Head><Body><DivID= "Div1">Font-size</Div></Body></HTML>
20150912 JavaScript event-Get style
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
