通过 javascript 进行的 IE/Firefox 样式更新不起作用

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% 确定的。如果您的 client 或 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);
}