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.

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

Answer 2

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>

Answer 3

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>

Answer 4

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