HTML DOM backgroundPositionY 属性
1,首先关于该属性在w3cschool文档中的解释是这样的
但在实际的应用的过程中会发现Object.style.backgroundPositionY=position是正常使用的
而style="backgroundPositionY:40px;"是不行的，具体的应用过程中应为style="background-Position-Y:40px;"
具体的情况看代码
<html>
<head>
<title>document示例 </title>
<script language="javascript" type="text/javascript">
function change(obj){
if(obj.value=="上"){
tank.style.backgroundPositionY="0px";
}else if(obj.value=="右"){
tank.style.backgroundPositionY="120px";
}else if(obj.value=="下"){
tank.style.backgroundPositionY="80px";
}else if(obj.value=="左"){
tank.style<strong>.backgroundPositionY</strong>="40px";}
}
</script>
</head>
<body>
<!--background-repeat:no-repeat;千万别加上 不然 不能重复背景 图片会显示不出来-->
<div id="tank"
style="<strong>background-Position-Y</strong>:0px;background-image:url('itank.jpg');width:40px;height:40px;">
</div>
<input type="button" value="上" onclick="change(this)"/>
<input type="button" value="右" onclick="change(this)"/>
<input type="button" value="下" onclick="change(this)"/>
<input type="button" value="左" onclick="change(this)"/>
</body>
</html>
类似的还有backgroundRepeat=repeat_value和background-repeat:no-repeat等等； 在具体的使用中要多加注意，一会要驼峰一回事带连字符的
2，关于具体的坐标定位
其中的图片为<html><head> <title>document示例 </title> <script language="javascript" type="text/javascript"> </script> </head> <body> <div id="tank" <strong>style="background-Position-Y:0px</strong>;background-image:url('itank.jpg');width:40px;height:40px"> </div> <input type="button" value="上" onclick="change(this)"/> <input type="button" value="右" onclick="change(this)"/> <input type="button" value="下" onclick="change(this)"/> <input type="button" value="左" onclick="change(this)"/> </body> </html>
是四张图片合在一个图片上，这个图片是40x160px的
style="background-Position-Y:0px;background-image:url('itank.jpg');width:40px;height:40px"就是让每次的y的坐标的定位不同，而且每次都是刚刚显示一个坦克的大小位置
但是具体的定位如下图，图片是默认自动在y轴上repeat的， <img src="http://img.blog.csdn.net/20141003150924273?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGxsMTc0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
可以把0px换成40px、-40px等值测试一下就知道具体的情况了
同理网cschool教程上的属性<a target=_blank href="" tppabs="http://www.w3school.com.cn/htmldom/prop_style_backgroundpositionx.asp">backgroundPositionX</a>也是具有类似的性质，再次不再赘述