在 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

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

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

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

ul > li > span
{
    color: black;
}

这是原始问题的链接： 如何设置 ul/li 项目符号点颜色？

Answer 2

要更改项目符号：
使用

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 3

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

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

Answer 4

简短的回答是否定的，您不能以纯 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'
});

使用我在此处找到的addRule函数，您首先删除list-style属性的所有ul元素，并使用li:before伪选择来模拟项目符号点。

使用li:before选择器