Question

我有一个这样的列表：

<ul class="list">
    <li class="list-element ">
        <a href="#"><a>
    </li>
</ul>
<button onclick="changeColour()"></button>
<script  src="js/index.js"></script>

我的链接的CSS是：

ul li a {
          color: red
        {

如何更改链接的颜色？我知道你可以这样做：

function changeColour() {
  var div = document.getElementsByTagName("ul");
  div.style.changeColour = "rgb(0, 212, 177)";
}

但我不知道列表中列表项内的链接如何。

Answer 1

您可以使用css进行更改。您的css是正确的，但在;之后您错过了red。你也可以使用javascript或者你可以使用它们，如果你想给它一个颜色然后在运行时更改它。对于您的javascript代码，您忘记添加集合的索引...

document.getElementsByTagName('a')[0].style.color='orange';

注意：我用[0]定位第一个锚点。通过集合定位所有锚点循环。

喜欢这个

function changeColour() {
  var div = document.getElementsByTagName("a");
  for(var i = 0; i < div.length; i++){
    div[i].style.color = "rgb(111, 112, 112)";
  }
}

changeColour();

ul li a {
  color: red;
{

<ul class="list">
    <li class="list-element ">
        <a href="#">link 1<a>
    </li>
    <li class="list-element ">
        <a href="#">link 2<a>
    </li>
</ul>

Answer 2

尝试document.querySelectorAll：

＆＃13;

let links = document.querySelectorAll("ul.list li.list-element a");
for (let link of links) {
    link.style.color = "rgb(0, 212, 177)";
}

＆＃13;

ul li a {
    color: red
{

＆＃13;

<ul class="list">
    <li class="list-element">
        <a href="">LINK 1</a>
    </li>
    <li class="list-element">
        <a href="#">LINK 2</a>
    </li>
</ul>

＆＃13;

Answer 3

<强> HTML

<ul class="list">
    <li class="list-element ">
        <a href="#">link 1<a>
    </li>
    <li class="list-element ">
        <a href="#">link 2<a>
    </li>
</ul>

<强>脚本

$('.list').each(function(){
        $(this).find('li a').css('color','rgb(111, 112, 112)');
 });

Answer 4

以下是Jquery模型，以防您正在寻找

＆＃13;

// Jquery model if you want to use
$(document).ready(function(){
   $('#change').click(function(){
   
   var color=["blue","red","yellow","black","pink","green"];
    var prompts = prompt("please type your valid color");
   // checking if entered colored is registered
    for(x in color){
      if(color[x] ==prompts){
      //registered then set its value as color
        $("a").css({"color":prompts});
        return ;
      }
     }
     // deal with unregistered color 
 var conf = confirm('not registered color entered , do you want to set the default color?');
        if(conf ==true ){
          $("a").css({"color":"black"});   
        }
   });
});

＆＃13;

ul li a {
  color: red;
{

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
    <li class="list-element ">
        <a href="#">link 1</a>
    </li>
    <li class="list-element ">
        <a href="#">link 2</a>
    </li>
</ul>

<p id='change'> please click here to change link color </p>

＆＃13;

如何使用javascript更改嵌套在其他元素中的元素的颜色

4 个答案: