getElementsByTagName не работает для моих тегов <a>

Question

Я не могу заставить это работать:

    <p>
        <a href="#">First</a>
        <a href="#" id="hasID">Second</a>
        <a href="#">Third</a>
        <a href="#" id="someID">Fourth</a>
    </p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

    <script>
        var link = document.getElementsByTagName("a");
        link.style.fontSize = '16px';
        link.style.textDecoration = 'none';
        link.style.color = '#333333';
        link.style.fontWeight = 'bold';
    </script>

Я пытаюсь добавить стили CSS (font-size, text-decoration, color, font-weight) для всех <a> тегов моего HTML-кода.

Answer 1

Это не работает, потому что вы пытаетесь применить изменения к списку в сравнении с отдельными ссылками. Вам нужно пройтись по ссылкам и применить изменения к отдельным элементам

var all = document.getElementsByTagName("a");
for (var i = 0; i < all.length; i++) {
  var link = all[i];
  link.style.fontSize = '16px';
  link.style.textDecoration = 'none';
  link.style.color = '#333333';
  link.style.fontWeight = 'bold'
}

Кроме того, похоже, что ваш скрипт выполняется до того, как определены элементы a. Следовательно, getElementsByTagName вернет пустую коллекцию. Попробуйте переместить скрипт в после определения якорных элементов

Answer 2

Когда встречается закрывающий тег этого блока <script>, оценивается весь код в нем.Поскольку что-либо после </script> еще не было проанализировано, результат из document.getElementsByTagName('a') не соответствует ожидаемому.

Оберните метод в событие onload или DOMContentLoaded.

Itкажется, что вы хотите нацелить все элементы привязки.Вместо того, чтобы проходить по всем якорям, лучше добавить элемент <style> с указанным текстом CSS:

window.addEventListener('load', function() {
    // `window.attachEvent('onload', function() {` for old IE versions
    var style = document.createElement('style');
    var cssText = 'a,a:link,a:visited {' +
             'font-size:16px;text-decoration:none;color:#333;font-weight:bold;}';
    style.appendChild(document.createTextNode(cssText));
    document.getElementsByTagName('head')[0].appendChild(style);
}, false);