javascript - 需要从 get ByID 更改为 ClassName (Javascript)

Question

当我使用 getElementByID 执行此操作时，它正在工作。但是当我将其更改为 className 时，它​​不起作用。

我之所以要用类名来做这个，是因为页面中会有很多循环 (php) 票，这些票是按票号排序的。当点击特定票的“查看”时，它会显示完整的消息。

当然，我这里是无法通过多个重复的“id”获取到的。我只需要将它更改为类名。请帮助。

            <div id="menuTiket">
                <span style="padding:10px; background:yellow; float:right;">
                    <a href = "javascript:void(0)" onclick ="document.getElementsByClassName('light').style.display='block'; 
                                                             document.getElementsByClassName('fade').style.display='block';
                                                             ">Tiket Baru</a></span></div>

                    <!--Black Overlay-->    
                    <div id="fade" class="fade overlayMessage" onLoad="initDynamicOptionLists()"></div>                                        

                    <!--Pop Up Div-->   
                    <div id="light" class="light popupBoxMesage">                      

                            <span style="position: absolute; top: 11px; right:1px; color:white;" id="closeBlocked">
                                <a style="color:green; text-decoration:none; background:white; padding:10px;" href = "javascript:void(0)" onclick ="document.getElementsByClassName('light').style.display='none'; document.getElementsByClassName('fade').style.display='none'"><b> X </b></a>
                            </span>
                        </div> 

CSS:

    <style type="text/css">

            .overlayMessage{
                display: none;
                position: fixed;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                z-index:10000001;
                -moz-opacity: 0.5;
                opacity:.45;
                filter: alpha(opacity=40);
            }

            .popupBoxMesage {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                bottom:0;
                right:0;
                border: solid 10px darkseagreen;
                background-color: greenyellow;
                width:70%;
                height:400px;
                z-index:10000002;
                overflow: auto;
                padding: 1% 2% 12px 2%;
                margin: auto;
            }
            /* CSS Document */
    </style>

Answer 1

它是 getElementsByClassName(注意“Element”之后的“s”)因为它返回多个元素。 DOM 中可以有多个具有相同类的元素。

结果将是一个集合，您可以像这样看到一个特定的元素:

var elements = document.getElementsByClassName("class");
var firstElement = elements[0];