1

虽然我可以看到在我真正需要一个不使用 JQuery 的解决方案之前已经问过这个问题，但它用于嵌入式 Web 界面，我不希望加载 jQuery 的开销。我需要能够仅使用单个页面上的 JS 来操作精灵，精灵的状态取决于某些 JS 变量。我确信这一定是可能的，但是如果不使用 JQuery 就找不到任何东西。

4

2 回答 2

3

我认为您可以使用 Object.style.backgroundPosition="position" 来更改所需的背景位置。

试试这个代码

 <!DOCTYPE html>
<html>
<head>
<style>
div
{
background-image: url('example.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script>
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";  
}
</script>
</head>
<body>

<button type="button" onclick="displayResult()">Position background image</button>
<br>
<div id="div1">
</div>

</body>
</html>

参考

于 2013-02-25T12:07:00.950 回答
3

最简单的方法（我认为）是定义自己的 css 类并在某些事件上更改这些类。IE

<style type="text/css">
.bg1{
/* Some attributes set here */
background-position:cen‌​ter;
}
.bg2{
/* Some attributes set here */
background-position:left;
}

</style>

然后你把你的javascript像这样

document.getElementById("some_id").class = "bg2";
于 2013-02-25T12:13:37.713 回答