Question

我有一个程序，它从自动完成中获取一个名称并将其发送到一个javascript函数，该函数动态创建一个带有按钮的标签。当我尝试使用DOM方法设置样式属性时，它在Firefox / IE 7中不起作用，但它在IE 8 / Chrome中起作用。这是函数，

function fnCreate(client) {
                    var newLbl = document.createElement("label");
                    var newBtn = document.createElement("input");
                    var hidden = document.getElementById("count");
                    var val = parseInt(hidden.value) + 1;
                    hidden.setAttribute("value", val);
                    newLbl.setAttribute("id", "lbl" + client + val);
                    newBtn.setAttribute("id", "btn" + client + val);
                    newBtn.setAttribute("type", "button");
                    newBtn.setAttribute("style", "background-color: #6D84B4; background-image: url('X.png'); vertical-align: middle; background-repeat: no-repeat; text-align: center; height: 14px;border-style: none;  border-width: 0px; ");
                    newLbl.innerHTML = client;
                    newLbl.setAttribute("style", "background-color: #6084B4; color: #FFFFFF");
                    newBtn.setAttribute("onclick", "fnDelete('" + client + val + "')");
                    newLbl.appendChild(newBtn);
                    myData.appendChild(newLbl);

输入参数“client”是名称。它应该将按钮附加到标签上，然后将标签附加到myData，这是表格内的div。

<label id="lblDimitris1" style="">

这是页面加载后IE8的标记

Answer 1

试试这个：

function fnCreate(client) {
  var newLbl = document.createElement('label');
  var newBtn = document.createElement('input');
  var hidden = document.getElementById('count');

  var val = parseInt(hidden.value) + 1;

  hidden.style.value = val;
  newLbl.style.id = 'lbl' + client + val;
  newBtn.style.id = 'btn' + client + val;
  newBtn.type = 'button';
  newBtn.style.backgroundColor = '#6D84B4';
  newBtn.style.backgroundImage = 'url(X.png)';
  newBtn.style.backgroundRepeat = 'no-repeat';
  newBtn.style.verticalAlign = 'middle';
  newBtn.style.textAlign = 'center';
  newBtn.style.height = '14px';
  newBtn.style.border: '0px';
  newBtn.onclick = fnDelete(client + val);
  newLbl.innerHTML = client;
  newLbl.style.backgroundColor = '#6084Bd';
  newLbl.style.color = '#FFFFFF';

  newLbl.appendChild(newBtn);
  myData.appendChild(newLbl);

}

setAttribute不符合跨浏览器标准。有一些我不是100％肯定的事情。如果你的客户端或val变量都是数字类型转换，你的onclick fnDelete（）函数中的参数连接应该可以工作，但这取决于你。还不确定你是否可以设置这样的元素的类型，但如果你的上述代码在某些浏览器上有效，那么这也是如此。

Answer 2

我认为最好的解决方案是实际创建2个类，这将提高可维护性。你有css类看起来像这样

.button1 {
    background-color: #6D84B4; 
    background-image: url('X.png'); 
    vertical-align: middle; 
    background-repeat: no-repeat; 
    text-align: center; 
    height: 14px;
    border: 0; 
}

.label1 {
    background-color: #6084B4; 
    color: #FFFFFF;
 }

在您的JavaScript中，您现在可以执行类似的操作

newBtn.className = 'button1';
newLbl.className = 'label1';

更容易阅读和维护。

完整代码如下

function fnCreate(client) {
    var newLbl = document.createElement('label');
    var newBtn = document.createElement('input');
    var hidden = document.getElementById('count');

    var val = parseInt(hidden.value) + 1;

    hidden.value = val;
    newLbl.id = 'lbl' + client + val;
    newBtn.id = 'btn' + client + val;
    newBtn.type = 'button';
    newBtn.className = 'button1';
    newBtn.onclick = fnDelete(client + val);
    newLbl.innerHTML = client;
    newLbl.className = 'label1'

   newLbl.appendChild(newBtn);
   myData.appendChild(newLbl);
}

通过javascript无法正常更新IE / Firefox样式

2 个答案: