由JavaScript創建的元素未被CSS文件格式化

我正在使用如下所示的嵌入式js腳本製作select元素。我確實看到在頁面上有一個select元素，但下拉列表是空白的。默認選擇也不顯示。我認爲CSS不能正常工作的原因是尺寸太小。我做了一個靜態選擇不是從JS，它是更大。有什麼建議麼？由JavaScript創建的元素未被CSS文件格式化

* UDPATE *

我追加選擇元素，但現在我有兩個。一個有選擇並且不受CSS影響的，一個是由CSS表單正確格式化的空白。是什麼賦予了？

<script> 
      function processCSV(file,parentNode) 
      { 
       var frag = document.createDocumentFragment() 
       , lines = file.split('\n'), option;     
       var intial_option = document.createElement("option"); 

       intial_option.setAttribute("value",""); 
       intial_option.setAttribute("disabled","disabled"); 
       intial_option.setAttribute("selected","selected"); 
       intial_option.innerHTML = "Please select a Plant"; 
       frag.appendChild(intial_option) 

       for (var i = 0, len = lines.length; i < len; i++){ 
        option = document.createElement("option"); 
        option.setAttribute("value", lines[i]); 
        option.innerHTML = lines[i];       
        frag.appendChild(option); 
        } 

       parentNode.appendChild(frag); 
              menuholder.appendChild(parentNode); 
      } 

      var plant_select = document.createElement("select"); 
      var datafile = ''; 
      var xmlhttp = new XMLHttpRequest(); 

      plant_select.setAttribute("class", "selectbox"); 
      plant_select.setAttribute("id", "plant_select"); 



      xmlhttp.open("GET","http://localhost:8080/res/plants.csv",true); 
      xmlhttp.send(); 
      xmlhttp.onreadystatechange = function() 
      { 
       if(xmlhttp.status==200 && xmlhttp.readyState==4) 
       { 
        processCSV(xmlhttp.responseText, plant_select); 
       } 
      } 
     </script>

的coresponding CSS文件部分如下所示

body 
{ 
    padding: 0; 
    margin: 0; 
background-color:#d0e4fe; 
font-size: 2em; 
     font-family: monospace; 
     font-weight: bold; 
    }

和

.menu_container 
{ 
    position: relative; 
    margin: 0 auto; 
} 
.menu_element 
{ 
float: right; 
width: 33%; 
}

來源

2013-10-08 TheCodeNovice

你可以發佈生成的HTML嗎？ –

也許是一個愚蠢的問題 - 但你是否試圖通過螢火蟲/鉻檢查生成的代碼位，以檢查是否正在應用所需的類等？ –

哪些瀏覽器遇到過這個問題？ – JAL

我相信你需要插入plant_select到DOM。

所以你執行processCSV之前，這取決於你希望你的菜單正是這樣做

var body_elem=document.getElementsByTagName('body')[0]; 
body_elem.appendChild(plant_select);

改變第一線（以追加到哪個元素）。有關創建和插入文檔元素的信息，請參閱https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild，另請參閱insertBefore。

實際上，我沒有看到將選項放入文檔的位置。

此外，這可能會有所幫助，因爲你特別是在IE瀏覽器 - 而不是 plant_select.setAttribute（「class」，「selectbox」）; plant_select.setAttribute（「id」，「plant_select」）;

嘗試

 plant_select.className="selectbox"; 
    plant_select.id="plant_select";

IE尤其是已經有問題與選擇不當映射屬性的屬性。以這種方式設置id和class比setAttribute更可靠。

來源

2013-10-08 15:59:35 JAL

我將文檔片段附加到作爲HTML選擇對象的parent_select。這應該正確嗎？你也意味着插入到DOM中。我創建了它，是否需要附加到div元素才能使用？ – TheCodeNovice

你必須把它附加到某個東西上，是的，否則它純粹存在於JS中，永遠不會出現在任何地方。 –

@TheCodeNovice：我在代碼中的任何地方都看不到parent_select。我確實看到了創建的plant_select，但沒有插入到頁面的任何位置（DOM）。您需要插入或追加或者將其前置到頁面中的某些內容中，即使它只是「document.body」。 – slebetman

由JavaScript創建的元素未被CSS文件格式化

回答

相關問題