.disabled="true”、.display="none”、.removeAttribute("disabled”)、.innerHTML、.style.backgroundColor、onfocus、onblur
<!DOCTYPE html>
<html lang="zh" id="htmlId">
<head id="headId">
<title>BOM基础</title>
<meta charset="utf-8">
<meta name="keywords" content=",,">
<meta name="description" content="">
<style>
</style>
</head>
<script type="text/javascript">
function initHideAndShowButton() {
alert("Onload initHideAndShowButton");
// 拿到“隐藏图片”按钮。
var theHideInput = document.getElementById("hideImgButton");
// 拿到“显示图片”按钮。
var theShowInput = document.getElementById("showImgButton");
// 初始状态“图片”正常显示,因此设置“显示图片”按钮为不可用。
theShowInput.disabled = "true";
// 拿到图片。
var theImg = document.getElementById("imgId");
// 保存初始“图片”的display属性。
//var defaultDisplayType = theImg.style.display;
var imgSrc = theImg.src;
// 设置“隐藏图片”按钮的点击事件对应的方法。
theHideInput.onclick = function(){
// 首先隐藏图片。
//theImg.style.display = "none";
theImg.src = "";
// 随后把“隐藏图片”按钮设为不可用。
this.disabled = "true";
// 设置“显示图片”按钮为可用状态。
// 此写达不到预计的效果。
//theShowInput.disabled = "false";
// 通过删除disabled属性达到设置按钮为可用状态的目的。
theShowInput.removeAttribute("disabled");
}
// 设置“显示图片”按钮的点击事件对应的方法。
theShowInput.onclick = function(){
// 首先显示图片。
//theImg.style.display = defaultDisplayType;
theImg.src = imgSrc;
// 随后把“隐藏图片”按钮设为可用。
theHideInput.removeAttribute("disabled");
// 设置“显示图片”按钮为不可用状态。
this.disabled = "true";
}
}
// 在页面尾部添加一图片
function addOneImagAtLast(obj){
var p = document.getElementById("bodyId");
p.innerHTML = p.innerHTML + "<img src='dragon.png' width='50' height='50' οnlοad='theLittleImageLoaded()'>";
}
function theLittleImageLoaded(){
alert("theLittleImageLoaded()");
}
function theBigImageLoaded(obj){
// 此处若弹出提示框,则点击“显示图片”按钮后,会弹出下面的提示框,但是,按钮的离焦事件就不能顺利执行(MAC中Goole浏览器测试)。
//alert("theBigImageLoaded(obj) + "+obj);
var theImg = document.getElementById("imgId");
theImg.style.backgroundColor = "blue";
}
function onfocusFunc(obj){
//在这里不能弹出提示框,否则在Mac的Google浏览器上会像死循环一样弹出提示框。
//alert("onfocusFunc");
obj.style.backgroundColor = "red";
var theImg = document.getElementById("imgId");
theImg.style.backgroundColor = "white";
}
function onblurFunc(obj){
//此处可以弹出提示框,不会像上面一样死循环。
alert("onblurFunc");
obj.style.backgroundColor = "";
}
</script>
<body οnlοad="initHideAndShowButton()" id="bodyId">
<div>
<div style="display: inline">
<img src="dragon.png" align= "center" id = "imgId" οnlοad="theBigImageLoaded(this)" width="200px" height="200px">
</div>
<div style="display: inline-block">
<form>
<input type="button" value="隐藏图片" id="hideImgButton" οnfοcus="onfocusFunc(this)" οnblur="onblurFunc(this)">
<input type="button" value="显示图片" id="showImgButton" οnfοcus="onfocusFunc(this)" οnblur="onblurFunc(this)">
<input type="button" οnclick="addOneImagAtLast(this)">
</form>
</div>
</div>
</body>
</html>