javascript getElementById for listStyle

I have no idea what I'm doing wrong but the bullets of the list wont change, please help.

This is the html

<div id="recetas_prepa">
<p class="recetas_preparacion">Preparación</p>
 <ul id="recetas_preparacion_lista">
    <li>Quitar aomo de 1 o 2 cm, salpimentándolas a continuación.
    </li>
    <li>En picado y la Mostaza Para CUando, removiéndolo todo.
    </li>
    <li>A de un poco de arroz blanco, unos champiñones o patatas hervidas.
    </li>
 </ul>
</div>

And this is the CSS

#recetas_prepa{
    width:480px;
    height:auto;
    overflow:hidden;
    background-color:lime;
    clear:both;
    margin-top:10px;
    margin-left:20px;
    margin-bottom:15px;
}
#recetas_preparacion_lista li{
    color:#333333;
    font-family: Verdana, sans-serif;
    font-size:10px;
    text-align:left;
    padding:8px 15px 0px 12px;
    list-style:decimal inside none;
}

and this is my JS:

<script language="javascript" type="text/javascript">
    function changeDiv()
    {
        var imgPath = new String();
        imgPath = document.get开发者_运维知识库ElementById("recetas_info").style.display;

        if(imgPath == "inline" || imgPath == "")
        {
            document.getElementById("recetas_info").style.display = "none";
            document.getElementById("recetas_ingre").style.display = "none";
            document.getElementById("recetas_prepa").style.clear = "none";
            document.getElementById("recetas_prepa").style.width = "350px";
            document.getElementById("recetas_prepa").style.height = "90px";
            document.getElementById("recetas_preparacion_lista").style.listStyle = "disc inside none";
        }
        else
        {
            document.getElementById("recetas_info").style.display = "inline";
            document.getElementById("recetas_ingre").style.display = "inline";
            document.getElementById("recetas_prepa").style.clear = "both";
            document.getElementById("recetas_prepa").style.width = "480px";
            document.getElementById("recetas_prepa").style.height = "auto";
        }
    }
</script>

There are some other stuff there but the the last of the if, i mean this line:

document.getElementById("recetas_preparacion_lista").style.listStyle = "disc inside none";

is the one that is not working, I have no idea why, it just wont change.

You should change your css to

#recetas_preparacion_lista li{
    color:#333333;
    font-family: Verdana, sans-serif;
    font-size:10px;
    text-align:left;
    padding:8px 15px 0px 12px;
}

and add

#recetas_preparacion_lista{
     list-style:decimal inside none;
}

You code will work now, since the css is not overridden by then fact that your javascript addresses the ul element while the CSS addresses the li elements.

demo at http://jsfiddle.net/gaby/SHCYw/