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是null，所以可能不存在，显示你的完整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>

Answer 2

错误消息表明PageCombatAlien元素不存在。从您更新的问题来看，这是因为大写是错误的。您希望document.getElementById("pageCombatAlien")不是PageCombatAlien

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

2 个答案: