在 Javascript 中创建动态 CSS答案

【问题标题】：Creating dynamic CSS in Javascript在 Javascript 中创建动态 CSS
【发布时间】：2012-09-26 05:55:08
【问题描述】：

我正在尝试为 Google 地图创建一个信息窗口，并且需要生成一个动态表单来显示信息。

以下脚本会生成一个名为“No_found_err: DOM exception 8”的错误：

//create objects for HTML elements              
var inputElement1 = document.createElement("input");
var inputElement2 = document.createElement("input");

//assign different attributes to the element
inputElement1.setAttribute("type", "text");
inputElement1.setAttribute("id", "poiName");
inputElement2.setAttribute("type", "textarea");
inputElement2.setAttribute("id", "poiDesc");

//create style tag, atrributes and values
//add css style to head tag and define classname for HTML "desctag" element
var cssNode = document.createElement("style");
cssNode.setAttribute("type", "text/css");
cssNode.style.cssText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

document.getElementsByTagName("head")[0].appendChild("cssNode");
document.getElementById("poiDesc").className = "cssClass";

var formString = "<b>Enter location details:</b>
<p>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
"&nbsp;&nbsp;&nbsp;" + inputElement1 + "<br>Description:&nbsp;&nbsp;" + inputElement2 +
"<p><center>" + "<input type='button' id='saveBtn' value='Save' onclick='savePOI()'>  
</center>";

//insert values into the form elements      
document.getElementById("poiName").value = locList[i].name;
**document.getElementById("poiDesc").value = locList[i].desc;**

此错误出现在最后两行之间。这是否意味着尚未创建标签 ID“poiName”和/或“poiDesc”？

我该如何解决上述问题？

谢谢。

【问题讨论】：

您在哪个浏览器中收到此错误？我认为如果没有找到元素“poiName”或“poiDesc”，它会说一些不同的东西。 locList 是什么？

标签： javascript css dom setattribute createelement

【解决方案1】：

document.getElementsByTagName("head")[0].appendChild("cssNode"); 应该是 document.getElementsByTagName("head")[0].appendChild(cssNode); 注意 cssNode 没有被引用，您传递了一个字符串来附加 Child 而不是节点。

inputElement1 和 inputElement1 不是字符串的元素，因此将它们附加到 html 字符串不会产生所需的结果。此外，您永远不会将它们或 html 字符串添加到 dom，因此 document.getElementById 将无法找到它们。

【讨论】：

【解决方案2】：

是的，您应该使用inputElement1 和inputElement2。

document.getElementById() 获取文档中具有 id 的元素。该文件直到现在还没有它。它只会在渲染时出现。

【讨论】：

【解决方案3】：

除了其他答案，这段代码需要改自：

cssNode.style.cssText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

到：

cssNode.innerText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

您的代码正在执行与此等效的操作：

<style type='text/css' style='.cssClass {vertical-align: text-top; width: 250px; height: 150px }'></style>

（顺便说一句，由于样式字符串包含类和大括号，这样使用是无效的。这意味着你实际上创建了<style type='text/css'></style>）

虽然我认为这是您的意图（为清楚起见添加了格式）

<style>
  .cssClass 
  { 
    vertical-align: text-top;
    width: 250px;
    height: 150px;
  }
</style>

这是一个完整的示例，(a) 动态创建样式元素 (b) 动态修改 css (c) 从列表中的项目中提取信息。

享受。 :)

<!DOCTYPE html>
<html>
<head>
<style>
label
{
    width: 75px;
    display: inline-block;
}
</style>
<script>
var locList = [ {name:'Australia', desc:'pop. 22,620,600', col:'green', bg:'yellow'}, {name:'New Zealand', desc:'pop. 4,405,200', col:'white', bg:'black'} ];
function byId(e){return document.getElementById(e);}

var dynamicCSS;

function selChange(element)
{
    var arrayIndex = element.value;
    if (arrayIndex != -1)
    {
        byId('poiName').value = locList[arrayIndex].name;
        byId('poiDesc').value = locList[arrayIndex].desc;

        var styleStr = "#poiName,#poiDesc{color: " + locList[arrayIndex].col + "; background-color: " + locList[arrayIndex].bg + "; }";
        dynamicCSS.innerHTML = styleStr;
    }
    else
    {
        byId('poiName').value = byId('poiDesc').value = 'No option selected';
        dynamicCSS.innerHTML = '';
    }
}

function myInit()
{
    var st = document.createElement('style');
    st.innerHTML = '#poiName, #poiDesc{border:solid 2px green;}';
    document.body.appendChild(st);

    dynamicCSS = document.createElement('style');
    document.body.appendChild(dynamicCSS);
}
</script>
</head>
<body onload='myInit();'>
    <form id='myform'>
        <label for='optSel'>Option:</label>
        <select id='optSel' onchange='selChange(this);'>
            <option value='-1'>None selected</option>
            <option value='0'>Aus</option>
            <option value='1'>NZ</option>
        </select>
        <br>
        <label for='poiName'>Name</label><input id='poiName'/>
        <br>
        <label for='poiDesc'>Desc</label><input id='poiDesc'/>
    </form>
</body>
</html>

【讨论】：

我实际上想提取存储在数组 locLost[i] 中的数据并将它们填充到表单元素“poiName”和“poiDesc”中。此代码块在 for 循环中。
locList[i].name 到 poiName locList[i].desc 到 poiDesc

我应该如何编写代码以将这些值放入相应的表单元素中？另外，我怎么能将 inputElement1 和 inputElement2 添加到 DOM 呢？

谢谢。
我已经更新了我的答案。这符合您的要求吗？