Question

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

我之所以要使用类名这样做是因为在页面中会有许多循环（php）票据，它是按票号排序的。当＆＃34;查看＆＃34;单击特定票证，它将在其上显示完整消息。

当然，我无法通过多个副本获得它＆＃34; id＆＃34;这里。而我只需将其更改为类名。请帮忙。

            <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（注意'元素'之后的's'，因为它返回多个元素。您可以在DOM中使用相同的类具有多个元素。

结果将是一个集合，您可以看到如下的特定项目：

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

需要从获取ByID更改为ClassName（Javascript）

1 个答案: