在js中更改li项目符号颜色

Question

我有 20 个模板，如下面的代码所示。文本通过数据库添加，因此无法更改其中 ul/li 的样式。我想写 1 个函数来改变它。

是否可以只更改外部 js 文件中的项目符号列表颜色（而不是实际文本）？

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

任何帮助将不胜感激。

Answer 1

更换项目符号：
使用

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

是的，它的 CSS
要更改项目符号的颜色，请使用 CSS“内容”：

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 2

简短的回答是否定的，您不能以纯 JavaScript 方式操作这样的列表。您需要在 HTML 中添加 class 并通过 JS 更改它，或者使用带有 • 的 span 标签，您可以使用 CSS 设置样式。有一点小技巧，但请确保调整列表项的margin，因为这会使它有点偏离，而且子弹也有点小所以嗯。您的电话，但这里有一个看法：

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'
});

使用我找到的over here 的addRule 函数，您首先去除list-style 属性的所有ul 元素，然后使用li:before 伪选择来模拟一个要点。

Using the li:before selector

Answer 3

在列表的 css 处编辑列表样式属性 list-style:none。并在 li 中添加自定义项。

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

Answer 4

你可以使用 css 来做到这一点。 您可以使用下面的代码创建一个类，然后使用 javascript 将该类应用到您需要的要点。

这个例子是Evan Mulwaski在一个与你类似的问题中提出的。

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

ul > li > span
{
    color: black;
}

这是原始问题的链接： how to set ul/li bullet point color?