Question

我正在尝试从chrome的“检查元素”窗口中获取html标签的属性，我正在使用jQuery。

Chrome inspect Property

我已经在下面尝试了以下代码

$("img#picture").prop("offsetTop");

和

$("img#picture").offset().top;

和

$("img#picture").attr("offsetTop");

它们都不返回260，这是我想要的，它们要么返回undefined要么为0。是的，我将它们放在$(document).ready(function() {...})下；以便它等待图像加载然后执行命令。

Answer 1

使用本机元素属性：

$("img#picture")[0].offsetTop

另请参阅https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

Answer 2

在这种情况下，您应该问自己是否应该使用原始Javascript或jQuery。

无论如何：

// vanilla JS
let offsetTop = document.querySelector("img#picture").offsetTop;
console.log(offsetTop);

// jQuery
let offsetTop = $("img#picture")[0].offsetTop;
console.log(offsetTop);

Answer 3

下面是调用函数的更好的地方

<body onload="script();">
or

document.onload = function ...
or even

window.onload = function ...

jQuery：

var image = $（“ img”）; var offset = image.offset（）;

console.log（“ left：” + offset.left +“，top：” + offset.top）;

JS：

var d = document.getElementById("div1");
var topPos = d.offsetTop;

Answer 4

OffsetTop不是HTML属性。它是对象的属性。 jQuery不返回对象属性。它只返回DOM节点。

使用香草

var a = document.querySelector("img#picture");
console.log(a[0].offsetTop);

使用jQuery

var a = $("img#picture");
console.log(a.offsetTop);

如何获取html标签的属性？

4 个答案: