Мой скрипт javascript для изменения css не работает

Question

function normToggle(){ 
document.getElementById('normToggle').onclick = function(){ 
    if(document.getElementById('normToggle').checked){ 
    document.getElementsByTagName('add').style.verticalAlign= 'baseline'; 
    }else{ 
     document.getElementsByTagName('add').style.verticalAlign= 'super'; 
    } 
}; 
document.getElementsByTagName('add').style.verticalAlign= 'super'; 
document.getElementById('normToggle').checked = false; 
} 

Поэтому я стараюсь использовать флажок, чтобы изменить стиль тегов 'add'. Их вертикальное выравнивание является супер первым, тогда я их не изменю, но они не ответили. Другой javascript из файла smae работает отлично.

Answer 1

getElementsByTagName возвращает HTML Collection - вам нужно перебрать коллекцию, чтобы изменить стиль каждого элемента в коллекции

что-то вроде этого:

function normToggle() { 
    var setAlign = function (align) { 
     [].forEach.call(document.getElementsByTagName('add'), function(tag) { 
      tag.style.verticalAlign = align; 
     }); 
    } 
    document.getElementById('normToggle').addEventListener('click', function() { 
     setAlign(this.checked ? 'baseline' : 'super'); 
    }); 
    setAlign('super'); 
    document.getElementById('normToggle').checked = false; 
} 

Глядя на код сейчас, у вас вряд ли будут элементы, называемые <add> !!! Это какая-то ошибка в вашем HTML?