作为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/

09-07 13:13