Javascript If/Else 语句检查 content: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);}

}

Javascript If/Else 语句检查 content:url

Javascript If/Else statement checking content:url

javascript

jquery

html

css

media-queries