Why is my CSS not applying on my javascript elements?

Question

Hi in my css file I create following css:

 #searchoption.root{
  width:100%;
    top:200px;
    z-index:4;
    background-color:black;
  }

  #searchoption.optionfield{
      background-color: #484848;
      height:150px;
      width:100%;
      z-index:3;
}

 #searchoption.dropbar{
        background-color: #656565;
        height:24px;
        width:100%;
        z-index:4;
        border-color:#828282;
        border-style:solid;
        border-width:0px;
        border-bottom: 1px;
        border-top:1px;
    }

and in my js file I create the following:

 var searchoptionrootID = "searchoption.root";
var dropbarID = "searchoption.dropbar";
var innershadowID = "searchoption.innershadow";
var optionfieldID = "searchoption.optionfield";
var outershadowID = "searchoption.outershadow";

var searchoptionroot;
var dropbar;
var innershadow;
var outershadow;
var optionfield;

function initSearchOption(){
    // initialisiert die suchoption leiste
    searchoptionroot = document.createElement("div");
    dropbar = document.createElement("div");
    innershadow = document.createElement("div");
    outershadow = document.createElement("div");
    optionfield = document.createElement("div");

    searchoptionroot.setAttribute("id",searchoptionrootID);

    dropbar.setAttribute("id", dropbarID);


    innershadow.setAttribute("id",innershadowID);

    outershadow.setAttribute("id",outershadowID);

    optionfield.setAttribute("id",optionfieldID);


    searchoptionroot.appendChild(optionfield);
    searchoptionroot.appendChild(innershadow);
    searchoptionroot.appendChild(dropbar);
    searchoptionroot.appendChild(outershadow);

    return searchoptionroot;
}

In the jsp i just return the object and append it to the document:

but it is not working why?

if (searchoption == null ){ 
            searchoption = initSearchOption();

            document.body.appendChild(searchoption);

            alert("height: " + document.getElementById("searchoption.root").style.width);
        }

Does anybody know?

SLaks · Accepted Answer · 2010-11-28 15:30:09Z

2

You should not use the . character in an ID for CSS.

The CSS selector #searchoption.root matches elements with an ID of searchoption and a class of root.

answered Nov 28, 2010 at 15:30

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

2 Comments

Quentin Over a year ago

Yes, you can. ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Quentin Over a year ago

Right. Because clearly I couldn't have commented and voted on the answer that was just plain wrong before seeing the edit that completely changed it.

Quentin · Accepted Answer · 2010-11-28 15:30:48Z

0

#searchoption.root means "An element with the id searchoption that is a member of the class root.

Your element has the id searchoption.root and isn't a member of any classes.

Your options:

Set the id and class of the element to match the selector
Change the selector to #searchoption\.root
Change the selector and id to use an underscore instead of a period (since underscores don't have special meaning in CSS selectors)

answered Nov 28, 2010 at 15:30

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

3 Comments

knut Over a year ago

I changed it to an underscore, but its not displayed anyway. What should I do?

Quentin Over a year ago

If you've changed all the selectors and all the ids, then it should work (assuming the style sheet is linked to the document correctly)

knut Over a year ago

it is, strange... it is only working when I set it up in setAttributes. But I dont want to set it there. I am running it on a jboss, all in a war file, when I set the elements direclty in the jsp it is working ... but not in the js file

Stephan Lemay · Accepted Answer · 2010-11-28 15:38:32Z

0

Try without using dot (.) in your element ID.

searchoption.root will be applyed to an element with css class "root" that is a sub element of control with id="searchoption" which does not seem to exist on your page.

answered Nov 28, 2010 at 15:38

Stephan Lemay

312 bronze badges

Comments

user520023 · Accepted Answer · 2010-11-29 17:10:59Z

0

Your code work well if you delete points: http://www.jsfiddle.net/pereskokov/uGA72/1/

Also be aware of using consturction element.style — in Chrome, for example, this construction returns only styles that were set direct in tag or manualy by javascript, but does not return computed styles or matched css rules.

answered Nov 29, 2010 at 17:10

user520023

Collectives™ on Stack Overflow

Why is my CSS not applying on my javascript elements?

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related