JavaScript示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>jstest</title>
	<style type="text/css">
		.abc{
			height: 100px;
			 100px;
			background-color:green;
			margin: auto;
		}
	</style>
	<script type="text/javascript">
	var addValue=10;
		function funclick(argument) {
			// body...
			var zx=document.getElementById("abc");
			zx.style.backgroundColor="red";//中划线删除，第二个单词首字母大写
			

			zx.style.width="120px";
			zx.style.height="120px";

			var x=zx.style.width;
			x=x.replace("px","");
			var xValue=parseInt(x);


			var y=zx.style.height;
			y=y.replace("px","");
			var yValue=parseInt(y);

			zx.style.width=xValue+addValue+"px";
			zx.style.height=yValue+addValue+"px";

			addValue+=10;

		}

/*实现盒子动态变化大小，取字符串中的搜需内容，修改后加到元字符串中替换原字符串*/
function func(){
				var img=document.getElementById("ad");
				//img.src="2.jpg";
				var str=img.src;
				
				//alert(img.src);
				//alert(img.src.indexOf("1.jpg"));/*原理寻找子字符串在父字符串中的索引值，子字符串存在则返回大于等于0的数值，初始值为0，子字符串
不存在否者返回-1*/
				
				if(str.indexOf("images/1.jpg")>=0){
					img.src="images/2.jpg";
				}else{
					img.src="images/1.jpg";
				}	
			}

	</script>
</head>
<body>
<div id="abc" class="abc" onclick="funclick()"></div>
<span><img src="1.jpg" id="ad"></span>
<button onClick="func()">点击变瘦</button>
</body>
</html>
　　javascript示例