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）添加到我的HTML代码的所有<a>标记中。

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事件中。

您似乎想要定位所有锚点元素。您最好使用给定的CSS文本附加<style>元素，而不是遍历所有锚点：

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

getElementsByTagName不适用于我的<a> tags</a>

2 个答案: