Question

I can’t get this to work:

    <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>

I’m trying to add CSS styles (font-size, text-decoration, color, font-weight) to all the <a> tags of my HTML code.

Answer 1

This isn’t working because you’re trying to apply the changes to the list vs. the individual links. You need to loop through the links and apply the changes to the individual items

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'
}

Additionally it looks like your script is running before the a elements are defined. Hence the getElementsByTagName will return an empty collection. Try moving the script to after the definition of the anchor elements