动态更改元素li的颜色不会更改项目符号点的颜色 [英] Dynamically changing the color of an element li doesn't change the color of the bullet point

问题描述

在Chrome（版本45.0.2454.101 m）中，如果我向列表元素添加一个类以更改其颜色，则只有在重新绘制窗口时调整项目符号颜色

  $（＃a）。click（function（）{$（＃a）。addClass（'blue'）;}）;  

  ul li {color：red; list-style-type：disk; margin-left：2em;}。blue {color：blue;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< ul> < li id =a> a< / li> < li id =b> b< / li> < li id =c> c< / li>< / ul>  

这是Chrome中的一个错误，可以用代码解决？ （或者它是一个错误？）

解决方案

这可能是一个错误，但我不会依赖于标准的光盘元素。

你可以使用CSS :: before伪元素。

< div（= function（）{$（*））; div class =snippet-code>

  #a）。addClass（'blue'）;}）;  

  ul li {color：red; list-style-type：none; margin-left：2em;} ul li :: before {content：•;} blue {color：blue;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js> < / script>< ul> < li id =a> a< / li> < li id =b> b< / li> < li id =c> c< / li>< / ul>  

In Chrome (Version 45.0.2454.101 m) if I add a class to a list element to change its color, the bullet point color is only updated when the window is repainted (resized)

$("#a").click(function() {    
   $("#a").addClass('blue');
});

ul li {
    color: red;
    list-style-type: disc;
    margin-left: 2em;
}
.blue {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li id="a">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
</ul>

Is it a bug in Chrome that can be solved with code? (or is it a bug at all?)

解决方案

Probably it is a bug but I would not rely on the standard disc elements.

You could use CSS ::before pseudo-element instead. It is much more configurable and is fully under your control.

$("#a").click(function() {    
   $("#a").addClass('blue');
});

ul li {
    color: red;
    list-style-type: none;
    margin-left: 2em;
}

ul li::before {
    content: "•";
}

.blue {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li id="a">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
</ul>

这篇关于动态更改元素li的颜色不会更改项目符号点的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！