时间戳

首页 > 解决方案 > Bootstrap js 正在向我的图像添加隐藏样式显示无

javascript - Bootstrap js 正在向我的图像添加隐藏样式显示无

问题描述

我正在使用 Bootstrap v5，它似乎阻止了我的图像加载。我在我网站的其他部分使用加载没有问题的图像。

我在html中写了以下内容<img border="0" src="example.com/img/kitties-long.png" id="placedTop">

当我通过开发者工具查看我的网页时。上面写着：<img border="0" src=example.com/img/kitties-long.png" id="placedTop" hidden="" style="display: none !important;">

基本上hidden="" style="display: none !important;"是违背我的意愿添加的。

我进入引导 css 文件并找到[hidden]{display:none !important}.

我有：

  1. !important从这件作品中删除，我的图像仍然隐藏
  2. !important从这件作品中删除并添加display: block !important到我的css文件中，但图像仍然隐藏
  3. 从引导 css 文件中删除了该[hidden]元素，然后我的网页的其他部分无法正常运行
  4. 看到有可能用 jQuery 来攻击它，但我不明白如何在我的 HTML 页面上物理编写整个脚本代码。

我已经看到写作$("tag or #id or .className here").show()应该可以工作，但我不明白需要输入什么或在哪里才能工作。我已经看到在我的 head 部分使用标签编写它或将其写入 .js 文件。

这是我的信息出现的整个 html：

<div class="ap-horz aboveCentral">
  <div class="ap-container" id="tAp">
    <img border="0" src="example.com/img/kitties-long.png" id="placedTop">
  </div>
</div>

我编写了一个 .js 文件来尝试查找并阻止代码加载，但这似乎也不起作用。unhide.js 文件是：

function unhideFunction() {
var hidingVar = document.getElementById("placedTop");
if (window.getComputedStyle(hidingVar).style.display === "none") {
    document.getElementById("placedTop").style.display = "block !important";
    document.getElementById("placedBot").style.display = "block !important";
}
}

我已经更改了我的 html 底部的 javascript 文件的顺序，将 unhide.js 放在 bootstrap.js 的顶部，并以另一种方式尝试了它们。

我对 javascript 很陌生，对 jQuery 的经验也很少。我非常了解 html 和 css，但不明白为什么只有这个图像被隐藏而不是其他图像。

标签： javascriptjquerycsshiddenbootstrap-5

解决方案

它可能是由 AdBlocker 引起的（至少在 Opera 浏览器中）。对我来说，它会阻止显示来自 //ws-na.amazon-adsystem.com/widgets/q?.... 的亚马逊产品图片（通过添加相同的 style="display: none !important;"）如果我关闭AdBlocker 扩展程序，图像出现

推荐阅读