使用 JavaScript 将 CSS 应用于动态生成的单选按钮

applying css to dynamically generated radio buttons using javascript

本文关键字：单选按钮 动态 应用于 JavaScript CSS 使用      更新时间：2023-09-26

嗨，我有一个 javascript 代码，可以生成单选按钮并在需要时删除。
for （var i = 0; i <len;>
Node.childNodes[i].innerHTML = ";

}

var Node1 = document.getElementById(tempArrIndex);        <br>
arrValueOptions = childValues[tempArrIndex["Values"].split(",");
for (var tempC2 = 0; tempC2 < arrValueOptions.length; tempC2++){
    var nameToUpdate = holdIDsToUpdate[tempCounter];
    var temp = tempC2 + 1;
    var idToUpdate = holdIDsToUpdate[tempCounter] + temp;
    var labelToUpdate = "";
    var defUpdater = "";
    if (arrValueOptions[tempC2] != ""){
        labelToUpdate = arrValueOptions[tempC2];
        if (childValues[tempArrIndex]["Default"] == labelToUpdate){
            defUpdater = 1;
        }
        var tbody = document.createElement('tbody');
        var row = document.createElement("tr");
        row.class = "test";
        var data1 = document.createElement("td");
        var newRadio = document.createElement("input");
        newRadio.type = "radio";
        newRadio.id = idToUpdate;
        newRadio.name = nameToUpdate;
        newRadio.value = labelToUpdate;
        if (defUpdater == 1){
            newRadio.setAttribute('checked', 'checked');
        }
        newRadio.setAttribute("onclick", "javascript:dependentFieldsValue('" + idToUpdate + "');");
        var data11 = document.createElement("td")
        var newLabel = document.createElement("label");
        newLabel.htmlFor = idToUpdate;
        newLabel.id = idToUpdate;
        newLabel.appendChild(document.createTextNode(labelToUpdate));
        tbody.appendChild(row);
        row.appendChild(data1);
        data1.appendChild(newRadio);
        row.appendChild(data11);
        data11.appendChild(newLabel);
        Node1.appendChild(row);
        defUpdater = 0;
    }
}

它工作正常，我需要做的是在组中的单选按钮之间创建间隙。 因为它们彼此非常接近。 任何人请帮忙。Gap在IE中看起来很好，但在Firefox中则不然。

可以通过

一些CSS在附加复选框的单元格上应用填充来获得间隙td

例如 
td { padding: 0.5em 0 }
将

类添加到生成的单选按钮中，如下所示：

newRadio.className = "myClass";

然后，您可以将任何CSS添加到所有单选按钮中，如下所示：

.myClass {
    margin-left: 3px;
}
相关文章：