Javascript 被DOM事件侦听器弄糊涂了

如果这是一个简单的问题，我很抱歉，但是我在使用javascript时遇到了困难

函数登录（）{
var lgin=document.getElementById（“登录”）；
lgin.style.display=“块”；
lgin.style.position=“固定”；
lgin.style.width=“100%”；
lgin.style.height=“100%”；
lgin.style.paddingTop=“15px”；
}
var lgButton=document.getElementById（“openRooms”）；
lgButton.addEventListener（“单击”，登录，错误）

登录
在窗口加载事件回调中添加事件侦听器

window.addEventListener("load",function(){
  var lgButton = document.getElementById("openRooms");
  lgButton.addEventListener("click", login, false);    
},false);

CSS:

JS:

看起来没问题，您是否打开控制台（F12）并检查错误，您可能在DOM中的元素之前添加了脚本，尝试将脚本标记向下移动到
之前。此外#logIn还具有CSS属性（display:none；）将
.padding top
更改为
.padding top
^^^，这就是您在web控制台中看到的错误（“引用错误：赋值中的左侧无效”，因为您无法赋值给表达式，并且
lgin.style。padding top
是
lgin.style.padding
-
top
）。正如adeneo所说，你可以在大多数浏览器上通过F12或Ctrl+Shift+I打开web控制台。哦，没有发现连字符，这确实是控制台中的一个错误。你也可以使用
.className
属性，比如
元素。className='someClass'
，这没关系，但是，一旦一个元素应用了大量的类，您就需要检查或更改它们，这就变得很困难了。但是，甚至比
className
更好的是，您可以获得一个
classList
成员，该成员可以检查、切换、添加元素可能拥有的类的列表并从中删除。这样做：
elem.classList.contains（className）和
元素classList.toggle（className）
和
元素classList.add（className）elem.classList.remove（className）-享受！：）对这也是很好的方式！
#logIn.selected {
  display:block;
  position:fixed;
  width: 100%;
  height: 100%;
  paddingTop: 15%;
}

  document.addEventListener("DOMContentLoaded", function(event) { 
     function login() {
       document.getElementById("logIn").setAttribute("class", "selected");
     }

     var lgButton = document.getElementById("openRooms");
     lgButton.addEventListener("click", login, false);
  });