Question

我在变量中遇到了jQuery选择器的问题。哦，HTML（background-image：url（'SOME-IMAGE-URL'））有一个内联样式，而不是样式表。

我似乎无法制作这个JS / JQuery脚本。它彻底打破了剧本。

var contentHeight = $(this).css('background-image').height();

完整代码：

var sliderWidth = 0;

$(".slider li").each(function() {
    var contentHeight = $(this).css('background-image').height();
    sliderWidth = sliderWidth + 100;
    $(".slider ul li").css("height",contentHeight);
});

var sliderContentWidth = sliderWidth/100;

$(".slider").css("width",sliderWidth + "%");
$(".slider li").css("width",100/sliderContentWidth + "%");

setInterval(function(){ 
    $(".slider ul").css("right",100/sliderContentWidth + "%");
}, 5000);

Answer 1

$.css()

上面的函数（jQuery.css()）返回给定属性的CSS值;在你的情况下一个字符串。 Strings don't have a .height() method though

所以在你的线上..

var contentHeight = $(this).css('background-image').height();

这实际上是发生..

$(this);并返回一个jQuery实例。
.css('background-image')在jQuery实例上运行，返回字符串（图像名称）
.height()在字符串上运行...但它不存在..呃哦。

在你的场景中，元素本身的高度可能就足够了。

$(this).height()

特别是考虑到默认情况下，如果背景小于元素，背景将重复，如果它更大则不会溢出。

超越了这个问题，并在下面的评论后澄清：

你想要背景图片的大小？这在现实中没有多大用处。请查看background properties的W3文档。

如果图像小于其应用的元素，则background-repeat属性默认为repeat。最终结果？ 背景采用整个元素。

如果图像大于它所应用的元素，那么它在元素边界之外是不可见的。这就是精灵工作的原因。最终结果？ 背景呈现整个元素。

可以使用不同的属性更改此行为，但在您的方案中，它似乎不是。基本上，元素的高度是背景的高度。

如果您想获得图片的实际尺寸，那么您将需要使用<img>元素，该元素作为DOM元素，具有height()和width()方法/属性。（虽然这需要绝对定位并且可能需要一些z索引;如果你需要这样做，那么最好重新考虑你正在做的事情）

使用/ JQuery选择器的变量会破坏我的代码

1 个答案: