Question

我想设置图像的背景宽度和高度。

document.getElementById('outerModalPopupDiv').style.backgroundImage = "url('samandar_003.jpeg')";
document.getElementById('outerModalPopupDiv').style.backgroundRepeat = "no-repeat";

现在我要设置图像宽度和高度。我知道background-size: 200px 50px;设置了高度和宽度，但我不能使用相同的。我必须以上述格式设置宽度和高度。

如果我使用

document.getElementById('outerModalPopupDiv').style.background.size = "200px 500px";

它不起作用。图像保持不变。

任何想法我怎样才能使这个工作。

Answer 1

如here所示，CSS3的background-size的js语法为：

object.style.backgroundSize="60px 80px"

因此，为了提供舒适的副本，试试这个：

document.getElementById('outerModalPopupDiv').style.backgroundSize = "200px 500px";

Answer 2

使用css3，您可以设置背景大小：

#outerModalPopupDiv {
    background-size: 200px 500px;
}

正如您所见here

或者，如果你想用javascript设置它，你可以创建一个css类并将该类添加到元素

的javascript：

document.getElementById("outerModalPopupDiv").className += "resizeBg200x500";

的CSS：

.resizeBg200x500 {
    background-size: 200px 500px;
}

或直接使用javascript：

document.getElementById("outerModalPopupDiv").style.backgroundSize="200px 500px";

或jQuery的另一种选择：）

$("#outerModalPopupDiv").css("background-size","200px 500px");

background-size是css3，但是很多浏览器都广泛支持，因为你可以看到here

Answer 3

就个人而言，我会创建一个带有重新调整大小的类，并使用JS

动态添加

http://jsfiddle.net/spacebeers/FFeEh/15/

document.getElementById('outerModalPopupDiv').style.backgroundRepeat = "no-repeat";

var element = document.getElementById('outerModalPopupDiv');

element.className += element.className ? ' backgroundResize' : 'backgroundResize';

使用css设置背景的宽度和高度

3 个答案: