Question

我正在尝试更改HTML页面上链接的字体颜色。虽然其他JavaScript可以正常工作，但链接拒绝更改颜色。

最初，链接字体颜色为白色：

#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}

但是，当单击按钮时，将执行以下功能：

a {
    color: white;   
}

必须有另一种在JavaScript中定义“ a”的方法，但是google并没有帮助。有什么想法吗？

Answer 1

您必须先选择链接，然后才能对其进行修改。

有两种方法可以选择JavaScript中的元素。最常见的是：

document.getElementById()，如果要通过其HTML id属性选择单个元素

document.querySelector()或document.querySelectorAll()，如果要选择与CSS选择器匹配的第一个或所有元素

document.getElementsByClassName()，如果您要根据元素的class属性选择元素

此外，您可以通过document.links

选择文档中的所有链接

Answer 2

此行：document.a.style.color = "black";仅尝试访问a对象中未定义的成员document。您必须选择所需的a（页面上的锚元素）元素，然后应用颜色修改。

有几种方法可以进行a元素的“选择过程”：

如果已经为a元素提供了ID，则可以使用内置的getElementById方法：即，给ID的'anchor-element' a元素：var anchor = document.getElementById('anchor-element）;`。
如果已经为a元素提供了class的话，另一种方法是使用内置的getElementsByClassName方法：即给class的'anchor-element'到a元素，可以说它是拥有该类的唯一元素：var anchor = document.getElementsByClassName('anchor-element）[0];`。
还有其他选项，例如querySelector，querySelectorAll或getElementsByTagName。

这是一个演示，我们将使用getElementById和getElementsByClassName来更改单击按钮时一些链接的颜色：

var btn1 = document.getElementById('btn-1'),
    btn2 = document.getElementById('btn-2');

btn1.addEventListener('click', handler);
btn2.addEventListener('click', handler);

function handler(e) {
  if(e.target === btn1) {
    // selecting the 'a' element using 'getElementById'.
    var a = document.getElementById('some-id');
    a.style.color = 'red';
  } else {
    // selecting the 'a' element using 'getElementsByClassName'.
    var a = document.getElementsByClassName('some-class')[0];
    a.style.color = 'green';
  }
}

/* just for this demo */
a, button {
  display: block;
}

<a href="#" id="some-id">getElementById is used</a>
<button id="btn-1">Change 1<sup>st</sup> link's color</button>
<a href="#" class="some-class">getElementsByClassName is used</a>
<button id="btn-2">Change 2<sup>nd</sup> link's color</button>

希望我进一步推动了你。

Answer 3

尝试使用此代码即可

<html>
<head>
    <style>
        a {
            color: white;
        }
    </style>
</head>
<body>

<a href="#">link text</a>
<button type="button" onclick="myFunction()">Click Me!</button> 

</body>
<script>

function myFunction() {
    document.getElementsByTagName("a")[0].style.color = "black";
}
</script>
</html>

Answer 4

有很多方法可以做到这一点。在将window.onload事件附加到元素之前，请记住使用onclick确保已加载元素。这是方法之一。

window.onload = function() {

    function myFunction() {
        var x = document.getElementsByTagName('a');
        var i;

        for (i = 0; i < x.length; i++) {
            x[i].style.color = 'black';
        }
    }
    
    // Change all links
    document.getElementById('button1').onclick = function () {
        myFunction();
    }

    // Change one link
    document.getElementById('button2').onclick = function () {
         document.getElementById('onelink').style.color = 'blue';
    }
}

body { background-color: #999999; }
a { color: white; }
#button1, #button2 { cursor: pointer; }

<a href="https://www.google.com">Google</a><br><br>
<a href="https://www.youtube.com" id="onelink">YouTube</a><br><br>  
<input type="submit" id="button1" value="Change all links to black"><br><br>
<input type="submit" id="button2" value="Change one link to blue">

使用JavaScript更改链接颜色属性

4 个答案: