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>也是具有类似的性质,再次不再赘述