<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jstest</title>
<style type="text/css">
.abc{
height: 100px;
width: 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>
原文：http://www.cnblogs.com/dldrjyy13102/p/7507916.html