JAVAScript 灯泡（开关，图片转换）

2021/11/3 17:10:18

编程Tag： javascript var img Tag 开关 box jpg btn 灯泡

本文主要是介绍JAVAScript 灯泡（开关，图片转换），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

方案一单按钮（开 / 关）

<!DOCTYPE html>

<head>

<style>

img{

width: 200px;

height: 300px;

}

</style>

</head>

<body>

var img = document.getElementsByTagName('img')[0];

var btn = document.getElementsByTagName('button')[0];

var tag = true;

btn.onclick = function () {

if (tag) {

img.src = '../images/bright.jpg';

btn.innerText = '关灯';

} else {

img.src = '../images/dark.jpg';

btn.innerText = '开灯';

}

tag = !tag;

}

</script>

</body>

</html>

方案二双按钮（开关）

<!DOCTYPE html>

<head>

</head>

<body>

</div>

var box_img = document.getElementsByClassName('box')[0].getElementsByTagName("img")[0];

var box_btn = document.getElementsByClassName('box')[0].getElementsByTagName("button");

box_btn[0].onclick = function () {

box_img["src"] = "../images/light.jpg";

}

box_btn[1].onclick = function () {

box_img.src = "../images/bark.jpg";

}

</script>

</body>

</html>

这篇关于JAVAScript 灯泡（开关，图片转换）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JAVAScript 灯泡（开关，图片转换）

方案一 单按钮（开 / 关）

方案二 双按钮（开 关）

相关编程文章

方案一单按钮（开 / 关）

方案二双按钮（开关）