How to change colour of an element nested in other elements using javascript

Question

I have a list structured as such:

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

The css for my links are:

ul li a {
          color: red
        {

How do I change the colour of my links?? I know you can do this:

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

but I don't know how to the links within list item within the list.

Kirill Simonov · Accepted Answer · 2018-01-23 02:35:34Z

2

Try document.querySelectorAll:

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

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>

answered Jan 23, 2018 at 2:35

Kirill Simonov

8,4913 gold badges23 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andam · Accepted Answer · 2018-01-23 02:45:06Z

2

You can change it with css. Your css is correct but you missed ; after red. And you can do it with javascript too or you can use both if you want to give it a color then change it at run time. For your javascript code you forgot to add the collection's index...

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

NB: I'm targeting the first anchor with [0]. To target all anchors loop through the collection.

Like this

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>

edited Jan 23, 2018 at 2:45

Andam

2,1971 gold badge10 silver badges28 bronze badges

answered Jan 23, 2018 at 2:29

user4723924

1424 bronze badges

1 Comment

user4723924 Over a year ago

How about now? :)

DHARMENDRA SINGH · Accepted Answer · 2018-01-23 03:18:10Z

0

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>

Script

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

answered Jan 23, 2018 at 3:18

DHARMENDRA SINGH

6155 silver badges21 bronze badges

Comments

GNETO DOMINIQUE · Accepted Answer · 2018-01-23 04:04:49Z

Below is Jquery model in case you are looking for it

// 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"});   
        }
   });
});

ul li a {
  color: red;
{

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

Collectives™ on Stack Overflow

How to change colour of an element nested in other elements using javascript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related