-1

Having trouble getting the bullet points/numbers in a list to change color along with the rest of the list when changing the color using jquery.

Using: $('ul li').css('color', '#2b2b2b');

This changes the color of the text in the list entry, but yet the bullet point stays the original color.

Before changing color After changing color

Does anyone know how to get around this? Thanks in advance.

Lewis
  • 33
  • 1

4 Answers4

2

After some tinkering I've found that list style elements can't be animated. If you want the color of the bullets to change dynamically you need to redefine the list-style-type and change it to another value so it can be repainted by the browser.

Check the updated fiddle demonstrating the described behavior: http://jsfiddle.net/prycc8gs/2/

henser
  • 3,307
  • 2
  • 36
  • 47
  • This seems to work well. Is there not a way to keep the old list style when changing color? I tried setting to something different and then changing back, but no luck. – Lewis Oct 20 '15 at 16:43
  • You can render list-style-type to none, then set a timeout to 1 millisecond and render it back to the initial values. See my example code below – turbopipp Oct 20 '15 at 18:02
1

ordered/unordered list working jsfiddle demo

$(function () {
    $("#change").on("click",function(e) {
        e.preventDefault();
        $('ul > li, ol > li').css({'color': 'red','list-style-type': 'none'});
        window.setTimeout(function () {
            $('ul > li').css('list-style-type', 'initial');
            $('ol > li').css('list-style-type', 'decimal');
        }, 1);
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ol>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ol>
<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>
<button id="change">Change color</button>
turbopipp
  • 1,245
  • 2
  • 14
  • 27
  • 1
    Worked with this, seemed the easiest way to work alongside using some of the other answers. – Lewis Oct 20 '15 at 18:50
1

To combine and imrpove @henser & @turbopipp

The default list style seems not to change color when triggering events (document ready excluded).

You can, however, switch to another style and back

$('ul > li').css('color', "green");
$('ul > li').css('list-style-type', 'square');
$('ul > li').css('color', "cyan");
$('ul > li').css('list-style-type', 'disc');

updated fiddle

Or, if you have access and want to play with the css, the second piece of advice stands - making the bullet yourself.

JNF
  • 3,696
  • 3
  • 31
  • 64
-2

You can also do it in jQuery with the .click() event.

This example is with numbers:

$(document).ready(function(){
   $("#change").click(function() {
        $('ol').css('color', 'red');
    })
});
ol { 
  counter-reset: item; 
}

ol li { 
  display: block; 
}

ol li:before {
  content: counter(item) ". ";
  counter-increment: item;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
<button id="change">Change text color</button>
Mario Kurzweil
  • 490
  • 6
  • 11