Question

作为javascript的新手我试图编写一个函数，在用户点击的任何地方向页面添加黄色div（如post-it）。事件处理似乎很好，但不知何故我想要的样式属性不适用。这是我的剧本：

<!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>

Answer 1

您正在创建的div没有大小，因此即使代码的其余部分按预期工作，它也不会显示。然后，一旦你给它一些大小，没有内容，所以你仍然可能看不到它。

color样式属性适用于div中的文本而您没有文字，因此您不会看到任何黄色。如果你想要一个黄色块，你应该用.style.backgroundColor = "yellow"将背景颜色设置为黄色（设置尺寸后）。

Answer 2

一些基本的演示：

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/

Answer 3

如果你想添加黄色div，你可能实际上想添加黄色div？您正在使用的代码应使其中的文本为黄色。如果你想让bg变成黄色，请改用style.backgroundColor。也给你的div一些宽度和高度，或者给它一些内容，否则现在可能会显示。

Answer 4

<div>内部没有内容，浏览器渲染通常不会跳过任何大小。您可能还需要在其中放入另一个元素（如带有lorem ipsum的<p>）以查看显示的内容。

要进行实时编辑和播放，请查看JSFiddle

这也不能做你想要的。设置颜色将使文本变为黄色，而不是使用便利贴效果。为此，使用背景。看看这个re-worked solution。

javascript修改元素的样式

4 个答案: