javascript修改元素的样式
作为 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>
As a newbie to javascript I am trying to code a function that adds yellow divs to page (like post-its) wherever the user clicks. Event handling seems fine, but somehow the style properties I want are not applied. Here is my script :
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
一些基本演示：
现场演示： http://jsfiddle.net/4kjgP/1/
Some basic demo:
Live demo: http://jsfiddle.net/4kjgP/1/
您创建的 div 没有大小，因此即使其余代码按预期工作，它也不会可见。然后，一旦你给它一定的大小，就没有内容了，所以你仍然可能看不到它。
color样式属性适用于 div 中的文本，并且没有文本，因此不会看到任何黄色。如果您想要黄色块，则应使用.style.backgroundColor = "yellow"将背景颜色设置为黄色（在设置大小后）。The div you are creating has no size so it won't be visible even if the rest of the code works as desired. Then, once you give it some size, there is no content so you still may not see it.
The
colorstyle attribute applies to text in the div and you have no text so you won't see any yellow. If you want a yellow block, you should set the background color to yellow (after you set a size) with.style.backgroundColor = "yellow".如果你想添加黄色 div，你可能真的在考虑添加黄色 div？您正在使用的代码应将其中的文本设为黄色。如果您希望背景为黄色，请改用 style.backgroundColor 。还要给你的 div 一些宽度和高度，或者给它一些内容，否则它现在可能会显示。
if you want to add yellow divs, you might be actually thinking of adding yellow colored divs? Code you are using should make text in them yellow. if you want bg to be yellow, use style.backgroundColor instead. Also give your div some width and height, or alternatively, give it some content, else it might now show.
内部没有内容且没有大小的
通常会被浏览器渲染跳过。您可能还需要在其中放入另一个元素（例如带有 lorem ipsum 的）才能看到出现的内容。要实时编辑和使用这些东西，请查看 JSFiddle
这也不能满足您的要求。设置颜色会使文字变黄，而不是便利贴效果。为此，请使用背景。查看这个重新设计的解决方案。
<div>with no content inside and no size will usually be skipped by browser rendering. You'll probably also need to put another element inside of it (like a<p>with lorem ipsum) to see something appear.For real-time editing and playing with this stuff, check out JSFiddle
This also doesn't do what you want. Setting the color will make the text yellow, not the post it note effect. For that, use background. Check out this re-worked solution.