javascript - 未定义的 CSS 属性(上/左)

标签 javascript jquery html css

所以我有这段代码: 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/

相关文章:

javascript - 创建由每个子数组的最大值组成的数组无法按预期工作

javascript - 使用 jQuery 将所选选项设置为多个列表

JavaScript:根据选择的 <option> 在包含 <select> 的表中设置 <td> 的背景颜色

jquery - 在 JavaScript 中将 `return false;` 附加到 `onClick` 事件处理程序

javascript - 如何在新页面加载后提交CFform并更改其action属性?

javascript - (ESLint) 找不到规则 'react/jsx-sort-prop-types' 的定义

javascript - 我正在尝试用 javascript 重写 memoize (下划线),有人可以解释一下吗?

php - 在 php 中回显 jquery 警报弹出窗口

javascript - 无法实现动态高度 jQuery Wookmark

javascript - 具有等间距 DIV 的流体宽度 + 最后一行左对齐