Question

我在找出正确的语法方面遇到问题，让我的代码使用id＆＃39; #main＆＃39;检查我的某个图片的值。我的CSS使用content：url属性基于媒体查询更改其src的图像。我这样做的原因是因为我有大约5个不同的背景图像，它们以不同的宽度触发，为我的内容提供一个框架，我需要能够调整我的＆＃34; .text＆的高度。＃34; 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语句检查内容：url

1 个答案: