Change size of bullet image using Javascript?

Question

I loaded an image bullet style via a url:

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

But I want to increase the size of the bullet (image) using Javascript, is that possible?

Answer 1

As was already mentioned in the comments, list-style-image does not support the behaviour you want.

Using backgrounds

If you don't have a background already : Just use the elements background-image property isntead.

If you do have a background already : In CSS3 it's possible to define multiple backgrounds. This means that you can use the bullet image as an additional non repeating background as well giving you full control over it. Controlling multiple backgrounds though javascript is not a lot of fun though and I haven't heard of any good plugins for it either. You might want to take a look around though, someone might have made something and otherwise just write your own abstraction layer.

Using data url's

An alternative, more crazy, approach would be to load the image through ajax, draw it onto an canvas scaled in any way you like, generate a data uri from the canvas and set that as the uri of the list-style-image property.

Answer 2

Use ::before pseudo class to display bullet

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/