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

 
 

你可能感兴趣的:(HTML DOM backgroundPositionY 属性)