gpt4 book ai didi

javascript - 确定 HTML 元素位置变化

转载 作者:技术小花猫 更新时间:2023-10-29 12:41:24 26 4
gpt4 key购买 nike

编辑:查看更新!

我有以下 html:

<body>
<span id="milestone1">
</span>
<img id="image1" src="blabla.jpeg" style="width:400px;height:200px;" />
<div id="divOverlayOverImage1" style="position:absolute; top:100px; left:40px; width:400px;height:200px;" onclick="DoFunkyStuff();"><div>
</body>

起初divOverlayOverImage1位于 Image1 之上,覆盖它,但如果我运行下面的代码,#divOverlayOverImage1元素将不再覆盖 #image1元素。

$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');

我想要一个事件,在#image1 时通知我改变它的位置,所以我可以更新 #divOverlayOverImage1 的位置.

注意:我不能完全控制 dom。 $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');命令由第三方运行。

更新:我没有对 DOM 的完全控制权,所以我无法对元素添加函数进行回调,因为不是我在进行此调用。另外,我不能疯狂地修改 HTML。我只是来到一组网站,通过 JavaScript 附加和覆盖特定图像,仅此而已。还有其他竞争对手也更改了 HTML。

最佳答案

如果您对 DOM 有完全的控制权,我假设您有,您可以为您在 DOM 中所做的每一个会影响 <span> 的更改添加一个调用。 .

function yourFunction() {
$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
updateMyOverlayPosition();
}

如果这不起作用,您可以在这里尝试这个:Detect changes in the DOM

编辑

如果你想要事件:

$('#image').on('adjustOverlay',function(e) {
// adjust the position of the overlay
}

$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
$('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});

编辑2

由于您无法完全控制 DOM 中的更改并且您可能会感到惊讶,您可以使用我在上面提供的链接或者检查一个时间间隔是否覆盖仍然存在它需要。这并没有以您想要的方式解决问题,但是没有关于 DOM 更改的 native 事件,因此您必须坚持使用某种解决方法。

var checkTime = 100; //100 ms interval
var check = setInterval(function() {
// adjust overlay position
}, checkTime);

编辑3

下一个可能的解决方案:如果您知道如何在 DOM 中插入影响代码,您可以尝试更改该方法,以便它始终运行您的 adjustOverlayPosition()或者触发一个事件,如果你喜欢事件。示例:如果它是用 jQuery 的 .after() 插入的您可以修改该功能:

jQuery.fn.extend({
// since the .after() function already exists, this will
// actually overwrite the original function. Therefore you need
// the exact code that was originally used to recreate it.
after: function() {
return this.domManip( arguments, function( elem ) {
if ( this.parentNode ) {
this.parentNode.insertBefore( elem, this.nextSibling );
}
// call the function directly
adjustOverlayPosition();
// or call an event
$('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});
}
});

缺点:此解决方案可能存在风险,并且只有在您知道最初使用的代码时才有效。所以它也取决于 jQuery 版本。

关于javascript - 确定 HTML 元素位置变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18054753/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com