Question

您好，在我的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);
        }

有人知道吗？

Answer 1

您不应在CSS的ID中使用.字符。

CSS选择器#searchoption.root匹配ID为searchoption且类为root的元素。

Answer 2

#searchoption.root表示“ID searchoption的元素是类root的成员。

您的元素的标识为searchoption.root，并且不是任何类的成员。

您的选择：

设置元素的id和类以匹配选择器
将选择器更改为#searchoption\.root
更改选择器和id以使用下划线而不是句点（因为下划线在CSS选择器中没有特殊含义）

Answer 3

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

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

Answer 4

如果删除点，您的代码就可以正常运行：http://www.jsfiddle.net/pereskokov/uGA72/1/

另外请注意在Chrome中使用consturction element.style，例如，此构造仅返回通过javascript直接在标记或手动设置的样式，但不返回计算样式或匹配的css规则。

为什么我的CSS不适用于我的javascript元素？

4 个答案: