所以我有这段代码: HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Joc</title>
</head>
<body onload="funcio()">
<img src="juanca.jpg" class="rey">
<img src="elefant.gif" id="elefant">
<button id="boton"> press me!</button>
</body>
</html>
CSS:
body {
background-image:url("hierba.jpg");
}
.rey {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
transition: top 5s linear, left 5s linear;
}
.reyMov{
width: 100px;
height: 100px;
position:absolute;
top:1px;
left:1px;
}
#elefant{
width: 100px;
height: 100px;
position: absolute;
top: 500px;
left: 700px;
}
#boton{
position: absolute;
top:50px;
left: 45%;
}
JS:
function funcio(){
alert("reyMov orig top "+$(".reyMov").css("top"))
var posicio = $("#elefant").position();
$(".reyMov").css("top",posicio.top+"px;");
var posicio2 = $(".reyMov").position();
alert("reyMov new top "+posicio2.top);
};
如您所见,我已经在 CSS 上为 reyMov 类定义了 top 和 left 属性,但是当我尝试访问它时(带有警报),js 控制台返回“未捕获的类型错误:无法读取属性‘top’的未定义”
我也尝试过更改此属性并重新获取它,但没有用。 解决此问题的任何提示? 谢谢!
最佳答案
如果您不在页面中使用类为 reyMov
的元素,则 $(".reyMov")
将不会返回任何元素:因此您正在链接css()
方法到一个空对象,警报语句将抛出该错误。
我猜你在 javascript 代码中打错了 rey/reyMov
(或者标记中的类名应该是 reyMov
而不是 rey
)
关于javascript - 未定义的 CSS 属性(上/左),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21678145/