gpt4 book ai didi

javascript - JavaScript 创建的元素未被 CSS 文件格式化

转载 作者:太空宇宙 更新时间:2023-11-04 04:19:58 24 4
gpt4 key购买 nike

我正在使用如下所示的嵌入式 js 脚本制作一个选择元素。我确实看到我在页面上有一个选择元素,但下拉列表是空白的。默认选择也不显示。我认为 CSS 不起作用的原因是尺寸太小了。我不是从 js 做了一个静态选择,它要大得多。有什么建议吗?

* 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>

对应的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%;
}

最佳答案

我相信您需要将 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 更可靠。

关于javascript - JavaScript 创建的元素未被 CSS 文件格式化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19252431/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com