How can I give a javascript element a CSS class?

Question

I've got the following code

var addressPopupMenu = window.createPopup();
function showAddressPopup() {
    var popup = document.getElementById('addressFullSpan');

    popupMenuBody = popupMenu.document.body;
    popupMenuBody.style.backgroundColor = "#336699";
    popupMenuBody.style.border = "solid 2px; white";
    popupMenuBody.style.fontSize="130%";
    popupMenuBody.style.color="white";
    popupMenuBody.style.padding="10px";
    popupMenuBody.style.paddingLeft="30px";

As you can see I'm repeating popupMenuBody.style. How can I give popupMenuBody.style a css class so I dont have to repeat this for every popup

edit: it's not working

I've added popupMenuBody.className = "popups";

.popups
    {
        background-color: #29527A;
        border: solid 2px; white;
        fontSize:120%;
        pcolor:white;
        padding:10px;
        paddingLeft:30px;
        textTransform:capitalize;
    }

also yes, i am including the .css in my page its working else where on the page

Amazing, three suggestions for JQuery and all the OP wants to do is style a single element. — user50049
– user50049, Commented Mar 8, 2011 at 9:48

dnch · Accepted Answer · 2011-03-07 11:51:36Z

5

popupMenuBody.className = "class_name";

answered Mar 7, 2011 at 11:51

dnch

9,6152 gold badges41 silver badges41 bronze badges

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

4 Comments

124697 Over a year ago

it doesn't work for some reason. theres no styling to the popup now

dnch Over a year ago

Do you have a CSS rule defined that contains the styles you're after?

dnch Over a year ago

I notice you're opening a popup menu... does that page reference your CSS styles?

dnch Over a year ago

Also, your CSS is invalid - that may have something to do with it.

Jakub Konecki · Accepted Answer · 2011-03-07 12:21:17Z

1

popupMenuBody.className = "my class";

.popups
    {
        background-color: #29527A;
        border: solid 2px white;
        font-size: 120%;
        color: white;
        padding: 10px;
        padding-left: 30px;
        text-transform: capitalize;
    }

edited Mar 7, 2011 at 12:21

answered Mar 7, 2011 at 11:52

Jakub Konecki

46.1k8 gold badges92 silver badges128 bronze badges

1 Comment

Jakub Konecki Over a year ago

CSS definitions are NOT the same as IE dom properties. Your CSS is invalid. I've included valid CSS.

LiorH · Accepted Answer · 2011-03-07 11:51:49Z

0

use jquery addClass? http://api.jquery.com/addClass/

answered Mar 7, 2011 at 11:51

LiorH

18.9k19 gold badges72 silver badges100 bronze badges

2 Comments

Clyde Lobo Over a year ago

Why the overhead of using jQuery when it be done rather easily with plain js ?

LiorH Over a year ago

it's just an alternative.. not a must

tiagoboldt · Accepted Answer · 2011-03-07 11:52:22Z

0

I would do it using Jquery and addClass():

$('#addressFullSpan').addClass('name')

answered Mar 7, 2011 at 11:52

tiagoboldt

2,4161 gold badge24 silver badges30 bronze badges

Comments

kaese · Accepted Answer · 2011-03-07 11:53:06Z

0

jQuery has the method addClass() for applying a CSS class to an element

http://api.jquery.com/addClass/

answered Mar 7, 2011 at 11:53

kaese

10.7k8 gold badges32 silver badges35 bronze badges

Comments

j_freyre · Accepted Answer · 2011-03-07 11:53:11Z

0

Have you tried :

var addressPopupMenu = window.createPopup();
function showAddressPopup() {
    var popup = document.getElementById('addressFullSpan');
    popupMenuBody = popupMenu.document.body;
    popupMenuBody.className = "className";
    ...
}

answered Mar 7, 2011 at 11:53

j_freyre

4,7382 gold badges32 silver badges47 bronze badges

Comments

Karl Nicoll · Accepted Answer · 2011-03-07 12:39:27Z

To assign a CSS class to an element created in JavaScript, you can just use the following line of code:

popupMenuBody.className = "popups";

You've said that this doesn't work, but this is actually because your CSS is broken. I'm assuming that you've copy/pasted some JavaScript into your CSS file and changed it a bit, and as a result, your property names are all wrong. What you actually need for your CSS is this:

.popups
{
    background-color: #29527A;
    border: solid 2px white;
    font-size:120%;
    color:white;
    padding:10px;
    padding-left:30px;
    text-transform:capitalize;
}

Notice that I have:

removed the ";" between "2px" and "white"
renamed "fontSize" to "font-size"
renamed "pcolor" to "color"
renamed "paddingLeft" to "padding-left"

Your CSS should now get applied correctly.

Mathias Bynens · Accepted Answer · 2011-03-07 12:43:54Z

0

To avoid overwriting existing classnames on popupMenuBody, do this:

popupMenuBody.className += ' class_name';

answered Mar 7, 2011 at 12:43

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

Collectives™ on Stack Overflow

How can I give a javascript element a CSS class?

8 Answers 8

4 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Related