Question

说我有这样的事情：

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

让我们说<div>的高度为50，宽度为250，背景为一些通用横幅。

我想要做的就是不要替换它（这意味着删除原文），而是创建一个（我设想的）绝对定位的副本，除了背景为白色和更高z-index，渲染广告无形。

将此视为adblock所做的事情，除非不切换实际广告，而是将其覆盖为白色。

最好的办法是什么？

感谢。

Answer 1

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

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

努力工作

使用.width()和.height()获取所选元素的尺寸。使用.css()创建一个新元素并设置高度，宽度和zindex。糟糕的部分是定位它。通常情况下，只需使用.offset()即可获得顶部和左侧。有时它更棘手。我推荐jQuery UI positioning plugin。此外，在调整浏览器窗口大小时，定位将关闭。您需要处理$(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/

Answer 2

首先，您需要在网站底部放置一个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＆amp; Chrome，请告诉我它是否无效。

Answer 3

我会选择更通用的选项，将叠加层插入要隐藏的元素

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'));

覆盖元素而不替换它

3 个答案: