显示隐藏图片html,JavaScript实现显示和隐藏图片

JavaScript之显示和隐藏图片，供大家参考，具体内容如下

点击按钮可以显示和隐藏图片(默认显示)，附上代码：

显示和隐藏图片

隐藏

// 1.获取事件源

var obtn = document.getElementById("btn");

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

// var isShow = true; //方法2

// 2.绑定事件

obtn.onclick = function (){

// if (isShow) { //方法2

if (obtn.innerHTML === '隐藏') {

// 3.事件驱动程序

newImg.style.display = 'none';

obtn.innerHTML = "显示"; //

// isShow = false; //方法2

}else {

newImg.style.display = 'block';

obtn.innerHTML = "隐藏";

// isShow = true; //方法2

}

有两种实现方法，实现情况如下：

这是默认显示界面，点击隐藏后，会这样：

简单的显示和隐藏图片功能就实现啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

显示隐藏图片html,JavaScript实现显示和隐藏图片相关推荐

html隐藏整个div,javascript – 如何显示一个div并隐藏所有其他div
我想在每个按钮点击时显示一个div,并且想要隐藏其他所有div我是如何做到的. 1 2 3 4 JQUERY $('#w').live('click', function(){ $('#a').cs ...
JavaScript之显示和隐藏图片
JavaScript之显示和隐藏图片点击按钮可以显示和隐藏图片(默认显示),附上代码: <!DOCTYPE html> <html lang="en"> ...
Javascript版-显示相应图片的详细信息
Hi All, 分享一个通过JS来显示相应图片的详细信息. 需求:进入页面时,动态加载图片信息:当鼠标移动到某一图片上时,则显示该图片的大图片并显示相应说明信息:当鼠标移开图片时,清除新创建的元素. ...
JavaScript和CSS实现详情图片显示大图特效
<!doctype html> <html> <head><title>JavaScript和CSS实现详情图片显示大图特效</title> ...
JavaScript 最简单实现隐藏和显示元素
JavaScript 最简单实现隐藏和显示元素通过按钮点击实现的隐藏与显示新建HTML文件,复制如下代码即可 <!DOCTYPE html> <html> <head ...
html js 点击隐藏div,javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总 15种方法实现div显示和隐藏 body{ margin: 0; } h1,h2{ margin: 0; } ul{ margin: 0; paddi ...
图片随机出现的HTML代码,Javascript随机显示图片的源代码
Javascript随机显示图片的源代码作者:佚名来源:网络整理 2008-4-11 在很多语言的学习中,"事件"都是一个比较难理解,但是又是一个很重要的概念.javascri ...
鼠标悬停时显示图片，不悬停时，隐藏图片
场景:让某元素本身在屏幕中不可见.如:鼠标:hover之后元素隐藏常见属性: visibility: hidden display: none 区别: visibility: hidden 隐藏元素 ...
javascript实现图片上传实时显示上传图片
我们平时会用到图片上传要求上传的图片要实时显示,那么下面就是我的方法 HTML代码如下 <input type="file" name="file" on ...

显示隐藏图片html,JavaScript实现显示和隐藏图片

显示隐藏图片html,JavaScript实现显示和隐藏图片相关推荐

最新文章

热门文章