javascript修改元素的样式

Question

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

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

这也没有做您想要的。 设置颜色将使文本变为黄色，而不是便利贴效果。 为此，请使用背景。 查看此重新设计的解决方案。

javascript修改元素的样式

问题描述

4 个解决方案

解决方案1
2 2011-09-17 23:13:45

解决方案2
2 已采纳 2011-09-17 23:24:02

解决方案3
1 2011-09-17 23:17:53

解决方案4
0 2011-09-17 23:17:11

javascript修改元素的样式

问题描述

4 个解决方案

解决方案1 2 2011-09-17 23:13:45

解决方案2 2 已采纳 2011-09-17 23:24:02

解决方案3 1 2011-09-17 23:17:53

解决方案4 0 2011-09-17 23:17:11

解决方案1
2 2011-09-17 23:13:45

解决方案2
2 已采纳 2011-09-17 23:24:02

解决方案3
1 2011-09-17 23:17:53

解决方案4
0 2011-09-17 23:17:11