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

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

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

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

所以，为了方便复制粘贴，试试这个：

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

Answer 2

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

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

正如你在这里看到的

或者，如果您想使用 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，但被许多浏览器广泛支持，如您在此处看到的

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';​