Обновление стиля IE / Firefox через JavaScript не работает - PullRequest
Новая
       13

Обновление стиля IE / Firefox через JavaScript не работает

0 голосов
/ 13 июля 2011

У меня есть программа, которая берет имя из автозаполнения и отправляет его в функцию 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 после загрузки страницы

Ответы [ 2 ]

1 голос
/ 13 июля 2011

На мой взгляд, лучшим решением является создание 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);
}
1 голос
/ 13 июля 2011

Попробуйте это: 

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 () должна работать, но это зависит от вас. Также не уверен, если вы можете установить тип элемента, как это, но если ваш код выше работал в определенных браузерах, это должно также.

...