Elementbyclass 没有为我的元素设置动画答案

【问题标题】：Elementbyclass is not animating my elementElementbyclass 没有为我的元素设置动画
【发布时间】：2021-03-05 01:48:28
【问题描述】：

请不要查询

我的动画无法正常工作我尝试使用document.getElementsByClassName，但它根本无法工作没有错误只是元素没有正确动画。

我想做一个快速改变颜色和一个小字体动画，但它不会在点击时实现，什么都不会发生。如果有任何关于其工作原理的好书也请提供帮助，我也将不胜感激。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JAVASCRIPT PRACTICA</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="CSS/PRACTICA JS.css">
</head>

<body>
    <div class="contenedor"><!--Name of the Flexbox Container-->
        <button class="botonTriggerGreen">Luigi</button><!--Trigger Green//button to press-->
        <button class="botonTriggerRed" onclick="botonMario()">Mario</button><!--Trigger Red//button to press-->
        <button class="botonTriggerBlue">Toad</button><!--Trigger Blue//button to press-->
    </div>  

    <div class="cuadroContenido">
        <h1 class="tituloCuadro">Mario
            <p class="contentMario">
                Mario (マリオ?) es un personaje ficticio de la franquicia de videojuegos homónima diseñado por el japonés Shigeru Miyamoto para la compañía Nintendo. Actuando como la mascota de la compañía, con su aparición en videojuegos, series televisivas y películas, se ha posicionado como el ícono emblemático de Nintendo, llegando a ser uno de los personajes más famosos y conocidos de videojuegos de todos los tiempos, junto a su hermano menor Luigi, quien es su compañero ícono en diversos juegos y lo ayuda a cumplir su misión.
            </p>    
        </h1>
    </div>
    <script>
        function botonMario() {
                document.getElementsByClassName("contentMario").style.animationPlaystate="running";
             
        }
    </script>
</body>
</html>

CSS：

.contenedor{                           /*CLASS NAME CONTAINER*/
    display:inline-flex;               /*Flexbox Setting*/
}

.botonTriggerGreen{                   /*CLASS NAME GREEN*/
    font-family: 'Bebas Neue', cursive;/*font family for the button*/ 
    letter-spacing: 2px;              /*space between letters*/
    color:black;                    /*color of font*/
    font-size: 16px;                  /*font size*/ 
    background-color: #2ECC40;      /*Background color*/
    margin: auto;                     /*setting margin*/
    width: 120px;                     /*sizes*/
    height: 50px;                     /*Width for the buttom*/ 
    padding: auto;                    /*Padding*/
    text-align: center;               /*align*/
    margin-left: 10%;                 /*Margin 2 center the element*/
    margin-top: 10%;                  /*same*/
    border-radius: 6px;               /*for rounded corners*/
    border: 1.4px solid black;      /*border size color*/
    box-shadow: 4px 4px 18px #888888;/*shadow for box*/
}

.botonTriggerGreen:hover{              /*cursor while overing set to pointer*/
    cursor:pointer;
}

.botonTriggerRed{                      /*CLASS NAME RED*/
    font-family: 'Bebas Neue', cursive;/*font family for the button*/ 
    letter-spacing: 2px;               /*space between letters*/
    color:black;                     /*color of font*/
    font-size: 16px;                   /*font size*/
    background-color: #FF4136;       /*Background color*/
    margin: auto;                      /*setting margin*/
    width: 120px;                      /*font size*/
    height: 50px;                      /*Width for the buttom*/ 
    padding: auto;                     /*Padding*/  
    text-align: center;                /*align center*/
    margin-left: 10%;                  /*Margin 2 center the element*/
    margin-top: 10%;                   /*same*/
    border-radius: 6px;                /*for rounded corners*/
    border: 1.4px solid black;       /*border shadow color etc*/
    box-shadow: 4px 4px 18px #888888; /*cursor while overing set to pointer*/
}

.botonTriggerRed:hover{  
    cursor:pointer;                    /*cursor while overing set to pointer*/
    
}


.botonTriggerBlue{                     /*CLASS NAME BLUE*/
    font-family: 'Bebas Neue', cursive;/*Font name*/
    letter-spacing: 2px;               /*space between letters*/
    color:black;                     /*color of the font*/
    font-size: 16px;                   /*Font size*/
    background-color:#39CCCC;        /*Background color*/
    margin: auto;                      /*setting margin*/
    width: 120px;                      /*size of the font*/
    height: 50px;                      /*Width for the buttom*/ 
    padding: auto;                     /*Padding*/  
    text-align: center;                /*align center*/
    margin-left: 10%;                  /*Margin 2 center the element*/
    margin-top: 10%;                   /*same*/
    border-radius: 6px;                /*for rounded corners*/
    border: 1.4px solid black;       /*border color and size*/
    box-shadow: 4px 4px 18px #888888;/*shadow of the boxes*/
}

.botonTriggerBlue:hover .{                /*cursor while overing set to pointer*/
    cursor:pointer;
}


.cuadroContenido{                        /*Content Name*/
    margin-top: 40px;                    /*Margin top*/
    background-color: #c6c6cc;         /*BG color*/
    width:  400px;                       /*Width-Height*/
    height: 400px;                       
    border: 1px solid black;           /*Border color and size*/
    border-radius: 5px;                  /*4 Rounded Corners*/
    margin-left: 2%;                     /*Margin LEFT*/
    box-shadow: 4px 4px 18px #888888; /*shadow of the box Content*/
    animation-name: marioColorRed;      /*COLOR ANIMATION*/
    animation-duration: 1s;             /*COLOR ANIMATION*/
    animation-fill-mode: forwards;      /*COLOR ANIMATION*/
    animation-play-state: paused;       /*COLOR PAUSED*/
}

.cuadroContenido:hover{
    cursor:text;
}


.tituloCuadro{                          /*NAME HEADER FOR CONTENT*/
    font-size: 30px;
    text-align: center;
    font-family: 'Bree Serif', serif;
}

.tituloCuadro>p{
    /*padding-top: 90px;*/
    color:black;
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    animation-name: marioDownwardsAnimation;/*DOWNARDS ANIMATION*/
    animation-duration: 1s;                 /*DOWNARDS ANIMATION*/
    animation-iteration-count: 1;           /*DOWNARDS ANIMATION*/
    animation-fill-mode: forwards;          /*DOWNARDS ANIMATION*/
    animation-play-state: paused;           /*DOWNARDS PAUSE*/
}
@keyframes marioDownwardsAnimation{
    from{ padding-top: 0px;}
    to{padding-top: 90px;}
}
@keyframes marioColorRed{
    from{background-color:#c6c6cc ;}
    to{background-color: #ff544a }
}

【问题讨论】：

document.getElementsByClassName 返回 HTMLCollection，而不是 SINGLE 元素 - 您在浏览器控制台中看到错误了吗？试试document.getElementsByClassName("contentMario")[0].style 等
css 错误.botonTriggerBlue:hover .{

标签： javascript html css dom

【解决方案1】：

当您使用document.getElementsByClassName 时，您正在使用该类引用一个元素数组。您需要通过引用元素的索引来指定您想要的。请改用document.getElementsByClassName("contentMario")[0].style.animationPlaystate="running";。

【讨论】：