Why position absolute in css does not work properly in javascript
Question
<html>
<head>
<style>
#wrapper{
position: absolute;
top : 250px;
width: 500px;
height: 500px;
border: 1px solid red;
}
.tagging{
position: absolute;
border: 1px solid black;
width : 20px;
height: 30px;
}
</style>
<script>
window.onload = function(event){
var wrapper = document.getElementById("wrapper");
var wrapperOffsetTop = wrapper.offsetTop;
wrapper.onmousedown = function(event){
var div = document.createElement("div");
div.className = "tagging";
div.style.top = event.clientY - wrapperOffsetTop;
wrapper.appendChild(div);
}
}
</script>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
This is my code. I hope to make an applicatian which user can click on the area and it will append an div box with the position of the mouse cursor, but it seems like it doesn't work. Why??
That work perfectly for me after I added +"px"
but why in my real application it does not work:
<html>
<head>
<style>
.tagging{
border: 1px solid red;
position: absolute;
padding: 0px;
margin: 0px;
width : 20px;
height: 20px;
}
</style>
<script>
window.onload = function(){
//get Information about imgWrapper
var imgWrapper = document.getElementById("imgwrapper");
var wrapperOffsetTop = imgWrapper.offsetTop;
var wrapperOffsetLeft = imgWrapper.offsetLeft;
//set the image wrapper to be the same size as the image
var img = document.getElementsByTagName('img');
imgWrapper.style.width = img[0].width;
//when image wrapper is click, append div element
img[0].onmousedown = function(event) {
event.preventDefault();
//create tag with class
var div = document.createElement("div");
div.className = "tagging";
imgwrapper.appendChild(div);
//get the position of mouse cursor
var mouseX = event.clientX;
var mouseY = event.clientY;
//set the position of the div
div.style.top = (mouseY - wrapperOffsetTop) + "px";
div.style.left = (mouseX - wrapperOffsetLeft) + "px";
//mousemove event
//assign mouse move action on image
//mouse up
}
}
</script>
</head>
<body>
<div id="imgwrapper">
<img src="jlin.jpg">
</div>
<form action="./yipee.php" method="POST" id="noob">
<input type="submit">
</form>
</body>
</html>
2 answers
solution1
5 ACCPTED 2013-09-05 09:53:25
You are setting the top property to a Number . It is expecting a CSS length, which requires units.
div.style.top = (event.clientY - wrapperOffsetTop) + "px";
solution2
2 2013-09-05 09:59:22
UPDATE: The initial code worked for Firefox and Chrome. To make it work in IE8, which doesn't support the W3 DOM event object, you need to pick up the window.event if (!event) { event = window.event; }
Unless I've misunderstood your question, it should simply be a case of also adding an offset in for the offset from the Left Margin:
<html>
<head>
<style>
#wrapper{
position: absolute;
top : 250px;
width: 500px;
height: 500px;
border: 1px solid red;
}
.tagging{
position: absolute;
border: 1px solid black;
width : 20px;
height: 30px;
}
</style>
<script>
window.onload = function(event){
var wrapper = document.getElementById("wrapper");
var wrapperOffsetTop = wrapper.offsetTop;
var wrapperOffsetLeft = wrapper.offsetLeft;
wrapper.onmousedown = function(event){
if (!event) {
event = window.event;
}
var div = document.createElement("div");
div.className = "tagging";
div.style.top = event.clientY - wrapperOffsetTop;
div.style.left = event.clientX - wrapperOffsetLeft;
wrapper.appendChild(div);
}
}
</script>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
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.