javascript - 使用javascript单击图像时如何将光标更改为自定义图像

Question

所以我想使用 javascript 通过更改整个页面的光标属性来将光标更改为自定义图像。 chrome 上的控制台给了我这个错误:

projetFinalPage1.html:626 Uncaught TypeError: Cannot read property 'style' of null
    at changeCursorGun (projetFinalPage1.html:626)
    at HTMLInputElement.onclick (projetFinalPage1.html:548)
changeCursorGun @ projetFinalPage1.html:626
onclick @ projetFinalPage1.html:548

这是我的代码

function changeCursorGun(){
		document.getElementById("pageCombatAlien").style.cursor = "url('images/gunCursor')";
	}

#pageCombatAlien{
	display: none;
	cursor: default;
}

<div id="pageCombatAlien">
			<div id="backgroundCombatAlien">
				<div id="texteCombatAlien">
				La voici la fameuse créature que mon détecteur a capté ! Je ne peux pas m'enfuir, car elle me rattarpera.
				</div>
				<input type="image" src="images/chest.png" onclick="changeCursorGun()" id="chest">
				<div id="healthBorder">
					<div id="health"></div>
				</div>
				<input type="button" onclick="healthLoss()" id="boiteClickAlien">
			</div>

		</div>

Answer 1

错误表明您正在查找的 ElementById 为空，因此可能不存在，显示您的完整 html 并确保 PageCombatAlien 存在。

但是你可以只用 css 来做到这一点，就像这样

运行代码片段查看效果

<div class="test">TEST</div>

<style>
.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}
</style>