JavaScript實例
阿新 • • 發佈：2017-09-12
document 大於 src body java round idt 字母 lac
<!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>
JavaScript實例