1

この質問は、JQuery を使用しないソリューションが本当に必要になる前に尋ねられたことがわかりますが、これは組み込みの Web インターフェイス用であり、jQuery をロードするオーバーヘッドは必要ありません。1 つのページで JS だけを使用してスプライトを操作できるようにする必要があります。スプライトの状態は特定の JS 変数に依存します。これは可能であるに違いないと確信していますが、JQuery を使用しないと何も見つかりません。

4

2 に答える 2

3

（私が思うに）最も簡単な方法は、独自のcssクラスを定義し、certanイベントでそれらのクラスを変更することです。すなわち

<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 に答える
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 に答える