javascript - 覆盖元素而不替换它

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()。使用 . 创建一个新元素并设置高度、宽度和 zindex .css()。糟糕的部分是定位它。通常，您只需使用.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/HakedByChinese/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 和 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'));