-3

我在变量中遇到 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);
4

1 回答 1

3 
$.css()

上面的函数（jQuery.css()）返回给定属性的 CSS 值；在你的情况下是一个字符串。字符串虽然没有 .height() 方法。

所以在你的线上..

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

这是真的发生了。。

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

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

$(this).height()

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

超越问题，并在您的评论后澄清：

你想要背景图像的大小吗？这在现实中没有多大用处。查看背景属性的 W3 文档。

如果图像小于它所应用的元素，则background-repeat属性默认为repeat. 最终结果？背景占据了整个元素。

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

可以使用不同的属性更改此行为，但在您的场景中似乎并非如此。所以本质上，元素的高度就是背景的高度。

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

于 2013-07-30T21:16:28.307 回答