作为javascript的新手,我正在尝试编写一个函数,该函数可在用户单击的任何位置向页面添加黄色div(如便利贴)。事件处理似乎很好,但是某种程度上我想要的样式属性没有应用。这是我的脚本:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function get_position(e){
//ie
if(document.all){
curX = event.clientX;
curY = event.clientY;
}
//netscape 4
if(document.layers){
curX = e.pageX;
curY = e.pageY;
}
//mozilla
if(document.getElementById){
curX = e.clientX;
curY = e.clientY;
}
}
function new_div(pobj,e){
get_position(e);
newdiv=document.createElement("div");
newdiv.style.position="absolute";
newdiv.style.left=curX+'px';
newdiv.style.top=curY+'px';
newdiv.style.color="yellow";
document.body.appendChild(newdiv);
// alert("new div");
}
</script>
</head>
<body onmousedown="new_div(this,event);">
</body>
</html>
最佳答案
一些基本的演示:
window.onclick = function ( e ) {
if ( e.target.className === 'postit' ) { return; }
var div = document.createElement( 'div' );
div.contentEditable = true;
div.className = 'postit';
div.style.left = e.clientX + 'px';
div.style.top = e.clientY + 'px';
document.body.appendChild( div );
};
现场演示:http://jsfiddle.net/4kjgP/1/