Javascript If/Else 语句检查内容 :url

Question

我在找出正确的语法来让我的代码检查我的一张 ID 为“#main”的图像的值时遇到了问题。我的 CSS 使图像根据使用 content:url 属性的媒体查询更改其 src。我这样做的原因是因为我有大约 5 个不同的背景图像，它们以不同的宽度触发，为我的内容提供一个框架，我需要能够根据什么调整我的“.text”div 的高度当前正在使用图像作为框架。

我了解如何编写所有这些代码，我需要的只是帮助如何在第一个上正确地请求值，我应该能够从那里完成其余的工作。再次澄清一下，问题出在 if/else 语句中；代码在没有 if/else 语句的情况下工作。

这是我的:

function updateHeight()
{

if ($("#main").css('content') === 'url("../images/main-bg2-landscape.png")') {

    var div = $('.text');
    var width = div.width();

    div.css('height', width *.57);}
}

只是 CSS 的一个例子:

#main {z-index: -1;
       position: absolute;}

.text {position: absolute;
       background-color: #FFFFFF;
       background-position: top;
       left: 11%;
       width: 78%;
       margin-top: 19%;
       opacity: .4;}

@media only screen and (min-width: 1025px) {

     #main {content:url(../images/main-bg2-landscape.png);}

     .text {position: absolute;
       background-color: #FFFFFF;
       background-position: top;
       left: 11%;
       width: 78%;
       margin-top: 19%;
       opacity: .4;}
}

谢谢

Answer 1

问题很可能是 css 中的“url()”调用将导致最终呈现的 HTML 中图像的完整路径。它不会是你放置在 .css 文件中的相对路径

在这种情况下可能类似于/images/main-bg2-landscape.png。如果您在 chrome 或您选择的浏览器中检查图像元素，您将看到最终出现在 HTML 中的完整路径。

更好的选择可能是仅对文件名进行比较，这样您就不会依赖于图像的位置。像这样的东西:

if ($("#main").css('content').indexOf("main-bg2-landscape.png") !=-1) {

var div = $('.text');
var width = div.width();

div.css('height', width *.57);}