覆盖元素而不替换它

Overlay an element without replacing it

本文关键字：替换 元素 覆盖      更新时间：2023-09-26

假设我有这样的东西：

<a href="/ad.php?go=123">
    <div class="ad"></div>
</a>

假设<div>的高度为 50，宽度为 250，背景为一些通用横幅。

我想做的不是替换它（这意味着擦除原始文件），而是创建一个（我设想的）绝对定位的副本，除了背景为白色和更高的z-index，使广告不可见。

将此视为广告拦截所做的工作，除了没有关闭实际广告，而是用白色覆盖它。

做

这样的事情最好的方法是什么？

谢谢。

只需选择锚点并设置visibility:hidden 即可。元素将保持不变，布局将保持不变，但广告将不可见。

$('a').css('visibility', 'hidden'); // replace 'a' with the appropriate selector for your ads, of course

以艰难的方式做这件事

使用 .width() 和 .height() 获取所选元素的尺寸。创建一个新元素并使用 .css() 设置高度、宽度和 zindex。糟糕的部分是定位它。通常，您只需使用.offset()即可获得顶部和左侧。有时它更棘手。我推荐jQuery UI定位插件。此外，调整浏览器窗口大小时，定位将关闭。您需要处理$(window).resize()并重新定位所有叠加层。它会闪烁，看起来像废话...这就是为什么你应该只使用 visibility:hidden .但是，适合自己。

但至少：

var $a = $('.ad');

$a.each(function() {
    var $this = $(this);
    $this.before($('<div></div>')
         .addClass('ad-overlay')
         .css({
            height: $this.height(),
            width: $this.width(),
            'z-index': 1000,
            'background-color': 'white',
            position: 'absolute',
            top: $this.offset().top,
            left: $this.offset().left
        }));
});

这是一个小提琴。http://jsfiddle.net/HackedByChinese/SF4tw/4/

首先，您需要在网站底部放置一个div 来放大并放置在顶部。

然后放大它并将其放置在顶部。

<script type="text/javascript">
document.getElementsByTagName('body')[0].innerHTML += "<div id='"adblocker'" style='"background-color:#FFF; position:absolute; z-index:999; display:block;'"></div>"
var blocker = document.getElementById('adblocker');
var ad = document.getElementById('ad');
blocker.style.top = ad.offsetTop+"px";
blocker.style.left = ad.offsetLeft+"px";
blocker.style.width = ad.offsetWidth+"px";
blocker.style.height = ad.offsetHeight+"px";
</script>

我已经在Firefox和Chrome中对此进行了测试，请告诉我它是否不起作用。

我会使用更通用的选项，将覆盖层插入要隐藏的元素中

var overlayElement = function (element) {
    var originalDiv = element,
        overlayDiv = document.createElement('div'),
        overlayStyle = overlayDiv.style;
    originalDiv.style.position = 'relative';
    // either:
    overlayStyle.position = 'absoluete';
    overlayStyle.top = 0;
    overlayStyle.left = 0;
    overlayStyle.width = '100%';
    overlayStyle.height = '100%';
    overlayStyle.background = 'white';
    // or pre set it with a css class and:
    overlayDiv.className = 'overlay-div';
    // finally:
    originalDiv.appendChild(overlayDiv);
    return overlayDiv; // just so you can go on working with it
}
var myOverlayElement = overlayElement(document.getElementById('divId'));
相关文章：