使用背景

Question

我通过网址加载了图片子弹样式：

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

但我想用Javascript增加子弹（图像）的大小，这可能吗？

Answer 1

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

使用背景

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

如果您确实有背景：在CSS3中，可以定义多个背景。这意味着您可以将子弹图像用作附加的非重复背景，并让您完全控制它。虽然通过javascript控制多个背景并不是很有趣，但我也没有听说过任何好的插件。你可能想看看，有人可能已经做了一些东西，否则只是编写自己的抽象层。

使用数据网址

另一种更疯狂的方法是通过ajax加载图像，将其绘制到以您喜欢的任何方式缩放的画布上，从画布生成数据uri并将其设置为{{1}的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/

使用Javascript更改子弹图像的大小？

2 个答案:

使用背景

使用数据网址