Question

我有20个模板，其设置与下面的代码类似。文本通过数据库添加，因此无法更改其中的ul / li样式。我想编写一个将改变它的函数。

是否可以只更改外部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

您可以使用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?

Answer 3

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

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

Answer 4

简短的回答是否定的，不是以纯粹的JavaScript方式操作这样的列表。您需要在HTML中添加class并通过JS进行更改，或者使用带span的{{1}}标记，然后使用CSS设置样式。有一点黑客，但请确保你调整列表项的•，因为这会使它稍微抛出，子弹也会小一些，所以呃。你的电话，但这是一个接受它：

margin

使用我找到over here的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属性的所有ul元素，然后使用list-style伪选择来模仿要点。

Using the li:before selector

在js中更改li子弹颜色

4 个答案: