简体   繁体   中英

remove display:none from a css class in JS

I've made this list of GoT charachters that could possible die (there's no spoilers or what so ever). The problem I'm having is that I'm supposed to remove a class but I can't make it work. I could just remove the CSS, I know but that's not what I'm trying to achieve here. I can't find the way to delete a CSS class during a JS event/function.

I can make it work by deleting the "li" tags so that part I've completed.

My HTML:

<ul class="carousel">
   <!-- <li><img src="images/cersei-lannister-1920.jpg" alt="Cersei Lannister" title="Cersei Lannister"/></li>
    <li><img src="images/daenarys-1920.jpg" alt="Daenarys" title="Daenarys"/></li>
    <li><img src="images/maetser-varys-1920.jpg" alt="Maester Varys" title="Maester Varys"/></li>-->
</ul>

MY JS:

function changeImageIndex(value){
    let charachter =["images/cersei-lannister-1920.jpg","images/daenarys-targaryen-1920.jpg", "images/maester-varys-1920.jpg", "images/margarey-tyrell-1920.jpg", "images/petyr-baelish-1920.jpg", "images/samwell-tarly-1920.jpg", "images/sansa-stark-1920.jpg"];


    let str = "<li><img src='";


    if(value === "1")
    {
        parseInt(i += 1);
        if( i > 6)
        {
            i = 0
        }
        str += charachter[i];

        console.log(str);
    }

    else{
        parseInt(i -= 1);
        if( i < 0)
        {
            i = 6;
        }

        str += charachter[i];
        console.log(str);
    }




    str += "'></img></li>";

    console.log(str);


    let HTML = document.getElementsByClassName("carousel")[0];
    console.log(document.querySelector("ul li").classList.remove("carousel"));

    document.querySelector("li").classList.remove("carousel");


    HTML.innerHTML = str;


}

MY CSS that I want gone:

.carousel li {
  display: none;
}

I hope you guys can help me out here! Thanks!

Make a seperate class take ".hidecarousel" for display:none and add it to your CSS. Use the class name in your li tags. And then make use of the javascript to simply remove it.

var list = document.getElementsByClassName("hidecarousel");
while (list.length)
    list[0].classList.remove("hidecarousel");

Here is how you can change the CSS of all the li inside your carousel ul to block.

 var array_of_li = document.querySelectorAll("ul.carousel li"); var i; for (i = 0; i < array_of_li.length; ++i) { array_of_li[i].style.display = "block"; } 
 .carousel li { display: none; } 
 <ul class="carousel"> <li>First</li> <li>Second</li> <li>Third</li> </ul> 

据我了解,您没有使用jQuery,因此这是用于从元素中删除类的Javascript解决方案。

ELEMENT.classList.remove("CLASS_NAME");

Maybe if you add a class by js and in CSS you do what you want

.carousel li.active{display:inline-block;}

Hope you can make it :)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM