为什么我的CSS没有应用到我的javascript元素上？

嗨，在我的css文件中，我创建了以下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;
    }

在我的js文件中，我创建了以下内容：

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

在jsp中，我只返回对象并将其附加到文档中：

但它不起作用为什么

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

            document.body.appendChild(searchoption);

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

---

有人知道吗？

您不应该在CSS的ID中使用

字符

CSS选择器

#searchoption.root

匹配ID为

searchoption

的元素和

root
#searchoption.root
的类。root

表示“ID为

searchoption

的元素，它是类

root

的成员”

您的元素具有id

searchoption.root

，并且不是任何类的成员

您的选择：

设置元素的id和类以匹配选择器

将选择器更改为

#searchoption\.root

将选择器和id更改为使用下划线而不是句点（因为下划线在CSS选择器中没有特殊含义）

尝试在元素ID中不使用点（.）

---

searchoption.root将应用于css类为“root”的元素，该元素是id为=“searchoption”的控件的子元素，该控件在您的页面上似乎不存在。

如果删除点，则代码工作正常：

---

还要注意使用construction

element.style

——例如，在Chrome中，此构造只返回直接在标记中设置的样式或javascript手动设置的样式，但不返回计算样式或匹配的css规则

是的，可以。ID和名称标记必须以字母（[a-Za-z]）开头并且后面可以跟任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“389;”）、冒号（：”）和句点（“.”）.对。因为很明显，在看到完全改变答案的编辑之前，我不能对完全错误的答案发表评论和投票。我将其更改为下划线，但无论如何都不会显示。我该怎么办？如果您更改了所有选择器和所有ID，那么它应该可以工作（假设样式表正确链接到文档）这很奇怪……只有在setAttributes中设置它时，它才起作用。但我不想在那里设置它。我在jboss上运行它，都在war文件中，当我在jsp中直接设置元素时，它起作用了……但在js文件中不起作用