CODEWITHSUNDEEP
javascriptcss
knut
knut

Reputation: 27

Why is my CSS not applying on my javascript elements?

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?

Upvotes: 1

Views: 2397

Answers (4)

user520023
user520023

Reputation:

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.

Upvotes: 0

Stephan Lemay
Stephan Lemay

Reputation: 31

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943564

#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:

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

Upvotes: 0

SLaks
SLaks

Reputation: 887453

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.

Upvotes: 2

Related Questions