如何使用 Javascript 验证 CSS 背景图像 URL

Question

逻辑是检查CSS元素的id(.boot)的url。如果 url 匹配，它会打印 hello world。但它什么也没做，我不知道为什么。

上下文：有一个按钮。我点击它。它检查 CSS 背景 url。如果 url 匹配，它会创建一个警报。

CSS：

.boot {
    width: 1000px;
    height: 1000px;
    background-image:url(Videos/printgifstart.GIF);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: fixed;
    bottom: -150px;
    right: 105px;
    z-index: 100;
}

HTML + Javascript

<div class="Logo2" id="blogo">
<h1></h1>
<div class="MirroredSmiles"></div>
<button id="ticketb" class="ticketb"
    style="height:100px;
        width: 75px;
        position: fixed;
        top: 335px;
        left: 200px;
        opacity: 0%;"
        onclick="tixbPLS">
</button>

    <script>
        var tix = document.getElementsByClassName('ticket');
        var tixb = document.getElementById('ticketb');
        var tixc = document.getElementById('ticketc');
        var sart = document.getElementById('shopdrawing');
        var sart2 = document.getElementById('shopdrawing2');
        var sart3 = document.getElementById('shopdrawing3');
        var sbakdo = document.getElementById('backdoor2');

        tixb.addEventListener('click', tixbPLS);

        function tixbPLS() {
            if (document.getElementById('boot').style.backgroundImage = url('Videos/printgifstart.GIF'))
            {
                alert("hello! world!");
            }
        }
    </script>
</div>

我在网上看了看，这个问题似乎倾向于语法错误，但我已经玩了几个小时的语法，它无法打印 hello world。

我想也许这只适用于图像，即使图像仍然没有运气。

我试过“=”或“==”还是不行。

我认为代码中可能有其他问题。所以而不是原来的 if 语句。我做了一个数学方程类型的 if 语句，警报工作得很好。

所以除了那条单数 if 行外，其他一切都很好。

Answer 1

您可以使用 CSSStyleSheet API 引用样式表规则。阅读 MDN 上的文章，它将详细解释我下面的示例 =>

document.styleSheets[0].cssRules[0].style.backgroundImage

.

注意：使用浏览器控制台开发工具确实可以帮助您解决这些问题。在控制台中查询

document.styleSheets

将返回

style sheet object

并让您真正了解对象的构成及其构造方式，然后您可以定制代码以获得所需的结果。

例如，如果我将

console.log(document.styleSheets)

添加到您的 JS 代码中，它将在控制台开发工具中生成以下对象。

  "0": {
    /**id:2**/
    "ownerRule": null,
    "cssRules": {
      /**id:3**/
      "0": {
        /**id:4**/
        "selectorText": ".boot",
        "style": {
          "0": "width",
          "1": "height",
          "2": "background-image",
          "3": "background-repeat-x",
          "4": "background-repeat-y",
          "5": "background-size",
    ...

我们这里有一个对象。该对象

0

的第一次迭代嵌套了一个

cssRules

对象，该对象的第一次迭代具有一个样式对象，这是样式

background-image

所在的位置。所以下面的代码行将从样式表中检索该数据 ==>

document.styleSheets[0].cssRules[0].style.backgroundImage

此外，请记住

=

是设置或分配某物，而

==

和

===

是比较级，后者是严格的比较运算符。有关更多信息，请参阅这个答案。

您实例中的另一个重要说明是，

document.getElementById('boot').style.backgroundImage

正在寻找 inline 样式，因此如果您的

.boot

元素 HTML 具有，例如：

<div class="boot" style="background-image:url(Videos/printgifstart.GIF);"> 

然后您的示例将使用正确的比较器操作数工作，但是如果您的

boot

元素类来自样式表，您将需要使用 CSSStyleSheets API 从样式表中读取该信息。

var tix = document.getElementsByClassName('ticket');
var tixb = document.getElementById('ticketb');
var tixc = document.getElementById('ticketc');
var sart = document.getElementById('shopdrawing');
var sart2 = document.getElementById('shopdrawing2');
var sart3 = document.getElementById('shopdrawing3');
var sbakdo = document.getElementById('backdoor2');

function tixbPLS() {
  if (document.styleSheets[0].cssRules[0].style.backgroundImage == 'url("Videos/printgifstart.GIF")') {
    alert("hello! world!");
  }
}

.boot {
  width: 1000px;
  height: 1000px;
  background-image: url(Videos/printgifstart.GIF);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: fixed;
  bottom: -150px;
  right: 105px;
  z-index: 100;
}

<div class="Logo2" id="blogo">
  <h1></h1>
  <div class="MirroredSmiles"></div>
  <button id="ticketb" class="ticketb" onclick="tixbPLS()">Click me</button>
</div>

Answer 2

您可以使用

getComputedStyle

获取元素上实际应用的 CSS 属性值，无论它们来自哪个样式表。

但是请注意，相对 URL 将解析为其绝对版本。您可以使用像

String#match

或

String#includes

这样的字符串方法来检查您想要的值。

RegExp#test

也可以应用。

let backgroundImg = getComputedStyle(document.querySelector('.boot')).backgroundImage;
console.log(backgroundImg);
let match = backgroundImg.match(/^url\("(.+)"\)$/);
if (match) {
  // multiple ways to verify the URL
  console.log(match[1]);
  console.log(new URL('Videos/printgifstart.GIF', document.baseURI).href === match[1]);
  let { pathname } = new URL(match[1]);
  console.log(pathname);
  console.log(pathname === '/Videos/printgifstart.GIF');
}

.boot {
    width: 1000px;
    height: 1000px;
    background-image:url(Videos/printgifstart.GIF);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: fixed;
    bottom: -150px;
    right: 105px;
    z-index: 100;
}

<div class="boot"></div>