javascript modify style of an element

Question

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>

The div you are creating has no size so it won't be visible even if the rest of the code works as desired. — jfriend00
– jfriend00, Commented Sep 17, 2011 at 23:16
@patrick dw - Thanks patrick. I new that was one problem, but didn't feel like figuring out if it was the only problem. Anyway, I did undelete my answer. — jfriend00
– jfriend00, Commented Sep 17, 2011 at 23:20

Šime Vidas · Accepted Answer · 2011-09-17 23:46:07Z

2

Some basic demo:

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 );
};

Live demo: http://jsfiddle.net/4kjgP/1/

edited Sep 17, 2011 at 23:46

answered Sep 17, 2011 at 23:24

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Visionary Software Solutions Over a year ago

Oh WOW. I'd never seen the contentEditable attribute before. That makes HTML5 pretty incredible. Nice succinct and impressive demo.

jfriend00 · Accepted Answer · 2011-09-17 23:36:58Z

2

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 color style 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".

edited Sep 17, 2011 at 23:36

answered Sep 17, 2011 at 23:13

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Comments

Kanwal Sarwara · Accepted Answer · 2011-09-17 23:17:53Z

1

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.

answered Sep 17, 2011 at 23:17

Kanwal Sarwara

4135 silver badges15 bronze badges

Comments

Visionary Software Solutions · Accepted Answer · 2011-09-17 23:23:55Z

0

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

edited Sep 17, 2011 at 23:23

answered Sep 17, 2011 at 23:17

Visionary Software Solutions

3,8472 gold badges32 silver badges35 bronze badges

Collectives™ on Stack Overflow

javascript modify style of an element

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related