javascript修改元素的样式_Javascript_Css_Dom

javascript修改元素的样式

javascript css dom

javascript修改元素的样式,javascript,css,dom,Javascript,Css,Dom,作为一名javascript新手，我正在尝试编写一个函数，在用户单击的任何地方向页面添加黄色div（比如post-its）。事件处理看起来不错，但不知何故，我想要的样式属性没有被应用。这是我的剧本： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> &

作为一名javascript新手，我正在尝试编写一个函数，在用户单击的任何地方向页面添加黄色div（比如post-its）。事件处理看起来不错，但不知何故，我想要的样式属性没有被应用。这是我的剧本：

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


功能获取位置（e）{
//即
如果（全部文件）{
curX=event.clientX；
curY=event.clientY；
}
//网景4
if（document.layers）{
curX=e.pageX；
curY=e.pageY；
}
//mozilla
if（document.getElementById）{
curX=e.clientX；
curY=e.clientY；
}
}
新职能部门（pobj，e）{
获得_位置（e）；
newdiv=document.createElement（“div”）；
newdiv.style.position=“绝对”；
newdiv.style.left=curX+'px'；
newdiv.style.top=curY+'px'；
newdiv.style.color=“黄色”；
文件.body.appendChild（newdiv）；
//警报（“新部门”）；
}

您正在创建的div没有大小，因此即使其余代码按需要工作，它也不可见。然后，一旦你给它一些尺寸，就没有内容了，所以你仍然可能看不到它

color

style属性应用于div中的文本，您没有文本，因此不会看到任何黄色。如果需要黄色块，则应使用

.style.backgroundColor=“yellow”

将背景色设置为黄色（在设置大小后），您正在创建的div没有大小，因此即使其余代码按需要工作，它也不可见。然后，一旦你给它一些尺寸，就没有内容了，所以你仍然可能看不到它

color

style属性应用于div中的文本，您没有文本，因此不会看到任何黄色。如果需要黄色块，则应使用

.style.backgroundColor=“yellow”

将背景色设置为黄色（在设置大小后），其中不包含任何内容，浏览器渲染通常会跳过任何大小。您可能还需要在其中放入另一个元素（如使用lorem ipsum的
）以查看出现的内容
要实时编辑和播放这些内容，请查看
这也不能满足你的要求。设置颜色将使文本变为黄色，而不是便利贴效果。为此，请使用背景。查看此内容。
如果没有内容，也没有大小，浏览器渲染通常会跳过。您可能还需要在其中放入另一个元素（如使用lorem ipsum的
）以查看出现的内容
要实时编辑和播放这些内容，请查看
这也不能满足你的要求。设置颜色将使文本变为黄色，而不是便利贴效果。为此，请使用背景。看看这个。
如果你想添加黄色div，你可能真的想添加黄色div？您正在使用的代码应使其中的文本变为黄色。如果希望背景为黄色，请改用style.backgroundColor。另外，给你的div加上一些宽度和高度，或者，给它一些内容，否则它现在可能会显示出来。
如果你想添加黄色div，你可能会考虑添加黄色div？您正在使用的代码应使其中的文本变为黄色。如果希望背景为黄色，请改用style.backgroundColor。还可以给div一些宽度和高度，或者给它一些内容，否则它现在可能会显示出来。
一些基本演示：
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 );
};

现场演示：
一些基本演示：
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 );
};

实时演示：
改用jquery，它非常简单您正在创建的div没有大小，因此即使其余代码按需要工作，它也不会可见。@jfriend00:您应该取消删除。你的答案似乎是对的。@patrick dw-谢谢patrick。我知道这是一个问题，但不想弄清楚这是否是唯一的问题。无论如何，我已经取消删除了我的答案。请改用jquery，它非常简单。您正在创建的div没有大小，因此即使其余代码按预期工作，它也不会可见。@jfriend00:您应该取消删除。你的答案似乎是对的。@patrick dw-谢谢patrick。我知道这是一个问题，但不想弄清楚这是否是唯一的问题。无论如何，我没有删除我的答案。哦，哇。我以前从未见过contentEditable属性。这使得HTML5非常令人难以置信。很好的简洁和令人印象深刻的演示。我以前从未见过contentEditable属性。这使得HTML5非常令人难以置信。很好的简洁和令人印象深刻的演示。