使用JavaScript更改项目符号图片的大小？

Question

我通过网址加载了图像项目符号样式：

var a = document.createElement('li');
a.style.listStyleImage = "url(some url)";
a.style.listStylePosition = "inside";

但是我想使用Javascript增加项目符号（图像）的大小，这可能吗？

Answer 1

正如评论中已经提到的那样， list-style-image不支持您想要的行为。

使用背景

如果您还没有背景 ：只需使用元素background-image属性istead。

如果您已经有背景 ：在CSS3中，可以定义多个背景。 这意味着您可以将项目符号图像用作附加的非重复背景，也可以完全控制它。 尽管控制javascript并没有多大乐趣，但是我也没有听说过任何适合它的插件。 但是，您可能想看看周围，有人可能已经做了一些事情，否则只需编写您自己的抽象层即可。

使用数据网址

另一种更疯狂的方法是通过ajax加载图像，以任意方式将其绘制到画布上，从画布生成数据uri，并将其设置为list-style-image属性的uri。

Answer 2

使用::before伪类显示项目符号

HTML：

<ul class="list">
    <li class="list-item">test
    </li>
    <li class="list-item">test
    </li>
<ul>

CSS：

.list{
    list-style: none;
}

.list-item::before{
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-image: url(http://placekitten.com/20/30);
    background-size: 200%;
}

http://jsfiddle.net/PtG6Q/1/