javaScript--05 DOM基础 12.2

来源：互联网发布：可以证件照软件编辑：程序博客网时间：2024/04/30 14:56

.disabled="true”、.display="none”、.removeAttribute("disabled”)、.innerHTML、.style.backgroundColor、onfocus、onblur

<!DOCTYPE html>

<title>BOM基础</title>

<style>

</style>

</head>

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' onload='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>

<div>

</div>

<form>

</form>

</div>

</body>

</html>

0 0