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

Javascript If/Else statement checking content:url

本文关键字：url 检查 语句 If Else Javascript      更新时间：2023-09-26

我在找出正确的语法以使我的代码检查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;}
}

谢谢

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

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

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

if ($("#main").css('content').indexOf("main-bg2-landscape.png") !=-1) {
var div = $('.text');
var width = div.width();
div.css('height', width *.57);}

}

相关文章：