DOM 操作点击鼠标事件

Question

I was trying to change the color of the background of the web page with a mouse click, below are the lines for the same:我试图通过单击鼠标来更改 web 页面的背景颜色，下面是相同的行：

 let bodyvar = document.querySelector('body'); bodyvar.addEventListener("click",generate); function generate(){ bodyvar.style.backgroundColor = "red"; }

When I test individual lines in console it is selecting the body and the function and everything works correctly individually but not on the actual page.当我在控制台中测试单独的行时，它正在选择正文和 function 并且所有内容都可以单独正常工作但不是在实际页面上。

I have just started leaning JS so am not sure what am missing here, will I also need to consider the co-ordinates that the mouse clicks on?我刚开始学习 JS，所以不确定这里缺少什么，我是否还需要考虑鼠标点击的坐标？

Answer 1

I suspect that the <body></body> is empty .我怀疑<body></body>是空的。 Add some content , or define the width and height .添加一些content ，或者定义width和height 。

 let bodyvar = document.querySelector('body'); bodyvar.style.minWidth = "100vw"; bodyvar.style.minHeight = "100vh"; bodyvar.addEventListener("click",generate); function generate(){ bodyvar.style.backgroundColor = "red"; }

Alternatively, I can use <HTML> instead of <body> .或者，我可以使用<HTML>而不是<body> 。

 let bodyvar = document.querySelector('html'); bodyvar.addEventListener("click",generate); function generate(){ bodyvar.style.backgroundColor = "red"; }

DOM 操作点击鼠标事件

问题描述

1 个解决方案

解决方案1
1 已采纳 2023-01-24 11:23:12

DOM 操作点击鼠标事件

问题描述

1 个解决方案

解决方案1 1 已采纳 2023-01-24 11:23:12

解决方案1
1 已采纳 2023-01-24 11:23:12