Question

所以我有这个代码： 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属性，但是当我尝试访问它时（带有alert），js控制台返回“Uncaught TypeError：无法读取属性'top'的未定义“

我也尝试更改此属性并再次获取它，但不起作用。有没有解决这个问题？谢谢！

Answer 1

如果你不在页面中使用类reyMov的元素，那么$(".reyMov")将不会返回任何元素：因此你将css()方法链接到一个空对象并且警告语句将抛出该错误。

我认为您在javascript代码中输入了rey/reyMov（或者标记中的类名应该是reyMov而不是rey）

Answer 2

在JQuery中，$（“”）是一个选择器，它从DOM中选择元素。您没有在HTML中的任何位置使用.reyMov类。您正在使用jQuery来编辑CSS，至少在您的实现中没有。

我认为你想要绑定一个元素，并使用addClass应用一个类，或者然后使用css方法来改变已经应用的css。

未定义的CSS属性（顶部/左侧）

2 个答案: