JavaScript getElementById для listStyle - PullRequest
Новая
       6

JavaScript getElementById для listStyle

0 голосов
/ 28 апреля 2011

Понятия не имею, что я делаю не так, но маркеры списка не изменятся, пожалуйста, помогите.

Это 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>

А это 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;
}

и это мой JS: 

<script language="javascript" type="text/javascript">
    function changeDiv()
    {
        var imgPath = new String();
        imgPath = document.getElementById("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>

Там есть и другие вещи, кроме последнего из if, я имею в виду эту строку: 

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

это тот, который не работает, я понятия не имею, почему, он просто не изменится.

1 Ответ

1 голос
/ 28 апреля 2011

Вы должны изменить свой CSS на 

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

и добавьте 

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

Ваш код будет работать сейчас, так как CSS не будет переопределен тем фактом, что ваш javascript обращается к элементу ul, а CSS обращается к элементам li.

демо на http://jsfiddle.net/gaby/SHCYw/

...