style.right and .style.top options not updated in
Question
I have two pictures, one of a wheel and another of an arrow. I want to position the arrow so it will point down on the wheel.
In my body part I defined:
<body onload="g1()">
<img src="arrow.png" id="arrow" width=8%>
<br>
<center>
<img src="wheel.png" id="wheel">
<br>
<h2 style="width:200px;" id="status"></h2>
</center>
</body>
And my function here is:
function g1()
{
var left1=screen.width/2;
var tikli=document.getElementById("arrow");
//tikli.style.right=0;
//tikli.style.top=0;
tikli.style.right=left1;
tikli.style.top=left1;
tikli.style.zIndex+=2;
//rotateAnimation("wheel",8,710);
}
Now the problem is, while the values of .style.right and .style.top are being updated, the arrow's position isn't. (I found out they are updated by inserting alerts in between).
Am I missing something in here? For the record, I tried it both in Chrome and in IE, and the arrow still doesn't move.
(ps. uploaded the pics to here )
Edit: Attaching CSS script:
<style type="text/css">
body{
//font-size:22px;
}
#arrow{
position:absolute;
bottom:100px;
right:500px;
}
</script>
1 answers
solution1
0 2014-09-14 15:25:48
screen.width/2; is going to give you a number, not a CSS length. You need to add "px" to it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.