Change li bullet color in js

Question

I have 20 templates that are set out like the code below. The text gets added in via a database so can't change the style of the ul/li in there. I want to write 1 function that will change it in all.

Is it possible to only change the bullet list color (not the actual text) in a external js file?

<div id="container">
<h1 id="head1">Header</h1>
<p id="p1">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
    </ul>
</p>

Any help would be appreciated.

[How to set Bullet colors](http://stackoverflow.com/questions/1470214/change-bullets-color-of-an-html-list-without-using-span) — adeneo, Mar 25 '16 at 22:13
Yes, add the CSS for a class, then add the class with javascript — adeneo, Mar 25 '16 at 22:39
I will give it a try but the database doesn't accept code only text — robyn_52_16, Mar 25 '16 at 22:42
Why would you need javascript for this? You can do this via CSS.... — Manu G, Feb 15 '21 at 00:34

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

You can use css to do it. You can create a class with the code below and then use javascript to apply that class to the bullet points you need.

This example was propose by Evan Mulwaski in a question similar to yours.

ul
{
    list-style-type: square;
}
ul > li
{
    color: green;
}

ul > li > span
{
    color: black;
}

This is the link to the original question: how to set ul/li bullet point color?

edited May 23 '17 at 11:59

Community

1
1

answered Mar 25 '16 at 22:18

davidRA

77
3

thanks, is there a way to get it to work in a external js not in css? – robyn_52_16 Mar 25 '16 at 22:25
You can use JQuery to add attributes to an html element... so you can have a function to changeColor adding the style color to your ul>li elements. – davidRA Mar 25 '16 at 22:29
hows that? I am new to js and jquery. I normally only so html css – robyn_52_16 Mar 25 '16 at 22:32

score 1 · Answer 2 · edited Feb 15 '21 at 00:30

1

To change the bullet:
use

list-style-type: "\1F44D"; // thumbs up sign

li{
  list-style-type: "\1F44D"; /* thumbs up sign */
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li></li>
    <li>Item 4</li>
</ul>

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

And yes, its CSS
To change the color of the bullet use CSS "content":

li {
  list-style: none; 
  position: relative;
}

li::before {
  color: #ff2211;  /*bullet color*/
  content: "\2022"; /* bullet char */
  position:absolute;
  left:-1.2em;  /* indent of the bullet to the text */
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li></li>
    <li>Item 4</li>
</ul>

edited Feb 15 '21 at 00:30

Lakshya Raj

1,669
3
10
34

answered Feb 12 '21 at 21:01

Frank34

79
6

1

Yes, this changes the character on the left of each list item, but it doesn't actually answer the question which is asking how to change the *color* of the bullet points, not the bullet points themselves. – Lakshya Raj Feb 12 '21 at 23:07
Thank you, that will help the OP more! – Lakshya Raj Feb 14 '21 at 17:56

score 0 · Answer 3 · answered Mar 25 '16 at 22:21

0

Edit list style attribute list-style:none at css of list. And add cutom item inside li.

<li>
   <span style = "color :red"> 
       &#9673; item 1
   </span>
</li>

answered Mar 25 '16 at 22:21

osmanraifgunes

1,438
2
17
43

score 0 · Accepted Answer · edited May 23 '17 at 12:23

The short answer is no, not in a pure JavaScript way can you manipulate lists like that. You would need to add a class to the HTML and change that via JS, or have span tags with •that you would style with CSS. There is a bit of a hack, but make sure you adjust the margin of the list items as this will throw it off a bit, also the bullets are a bit smaller so eh. Your call, but here's a take on it:

var addRule = function(selector, styles, sheet) {
    styles = (function(styles) {
        if(typeof styles === 'string') {
            return(styles);
        }
        var clone = '';
        for(var p in styles) {
            if(styles.hasOwnProperty(p)) {
                var val = styles[p];
                p = p.replace(/([A-Z])/g, "-$1").toLowerCase(); // convert to dash-case
                clone += p + ":" + (p === "content" ? '"' + val + '"' : val) + "; ";
            }
        }
        return(clone);
    }(styles));
    sheet = sheet || document.styleSheets[document.styleSheets.length - 1];
    if(sheet.insertRule) {
        sheet.insertRule(selector + ' {' + styles + '}', sheet.cssRules.length);
    } else if(sheet.addRule) {
        sheet.addRule(selector, styles);
    }
};
var uls = document.querySelectorAll('ul'), ul = null;
for(var i = 0, len = uls.length; i < len; i++) {
    ul = uls[i];
    ul.style.listStyle = 'none';
}
addRule('li:before', {
    'content': '• ',
    'color': 'red'
});

Using the addRule function I found over here, you first strip all the ul elements of the list-style property and use li:before pseudo selection to mimic a bullet point.

Using the li:before selector

Thanks, so if i add this to my script do i need to add a class to the ul? — robyn_52_16, Mar 25 '16 at 22:57
The line `document.querySelectorAll('ul')` will grab all `ul` on the page, but you could add a class to the lists you want changed and change the selectors: `document.querySelectorAll('ul.my-ul-class')` and `addRule('ul.my-ul-class li:before', {` — faino, Mar 25 '16 at 23:36
thanks that seems to have worked for the templates by the dot shows as text like this - â€¢, do you know why this happens? — robyn_52_16, Mar 25 '16 at 23:49
Yeah, your best bet is to use Unicode, so like this: `'content': '\2022 ',` and [here is a reference](https://brajeshwar.github.io/entities/) to all sorts of codes, so you could have very different bullets instead of the circle, like an arrow or a heart. — faino, Mar 26 '16 at 00:15

Change li bullet color in js

4 Answers4