点击按钮，图片和按钮的文字发生改变

点击“隐藏”按钮，下方的图片隐藏，并且按钮上的文字由“隐藏”变为“显示”。再次点击，图片显示并且位子再次由“显示”变为“隐藏”

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>点击后字体图片发生改变</title>
</head>
<body><form name="form"><input id="btn" name="btn" type="button" value="隐藏" onclick="buhao()">
</form>
<img id="img" src="美女.jpg" style="width: 25%;">
<script rel="stylesheet" type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">function buhao() {if(document.form.btn.value=="隐藏"){document.form.btn.value = "显示";$("#img").fadeOut(1000);console.log("显示");}else {document.form.btn.value = "隐藏";$("#img").fadeIn(1000);console.log("隐藏");}};
</script></body>
</html>

点击查看效果图

效果截图：

----------------------------------------分割线--------------------------------------

在表单form中，我一开始用的是id属性，而不是name属性，却怎么也得不到结果，一开始我还纳闷，最后发现form表单是用name发送request的，而不是id。

这说明id和name还是有很多区别的。

通常name和id的解释：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的

这句话是没错，但是很操蛋的就是，这句话给我带来一个误解：id是可以替代name的

但是：name有很多用途不是id能够替代的

首先，表单form在提交数据时用的就是name，而不是id。因为在表单form中可能会对应多个控件（如：radio、CheckBox），而id必须保持唯一，所以必须用name。另外，浏览器会根据name来设定发送到服务器的request，如果用id，则服务器无法得到数据。

查看更多name不可替代的用途

转载于:https://www.cnblogs.com/gwcyulong/p/6968125.html

点击按钮，图片和按钮的文字发生改变相关推荐

Atitit 动态按钮图片背景颜色与文字组合解决方案
Atitit 动态按钮图片背景颜色与文字组合解决方案转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标文字分拆,使用字 ...
ios 按钮图片充满按钮_iOS有一些非常危险的按钮-UX评论
ios 按钮图片充满按钮 I recently bought a cool thing off Amazon. It's an adapter for iPhone, making it easy t ...
java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求: 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
如何实现按钮的图片在右边，文字在左边
按钮设置了文字和图片,若宽度足够展开的话,默认都是图片在作,文字在右.想文字在左,图片在右有三种方法. 第一种方法很简单.通过设置setSemanticContentAttribute属性来实现. _ ...
【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
文章目录一.浮动按钮及点击事件二.底部显示按钮组件三.手势检测器组件四.image_picker 完整代码示例五.相关资源一.浮动按钮及点击事件一般使用 Scaffold 组件作为界面的 ...
html点按钮展开图片,案例：点击按钮隐藏图片再次点击显示图片
要求如题,本宝宝的代码如下: Document .hide{ display: none; } 隐藏图片 function fn(){ var img=document.getElementById( ...
cocos2dx点击按钮更改按钮图片
cocos2dx中有一个加载纹理的方法 //正常态的按钮常用这个 LoadTextureNormal(); //禁用态的按钮 loadTextureDisabled("res/Default ...
html图片点击左右滑动效果,基于jquery实现点击左右按钮图片横向滚动
点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 点击左右按钮图片横向滚动 * { margin:0; padding:0;} body { fon ...
html5几张图片怎么并排一行_html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行...
在日常开发中,经常会使用到图片与文字或图片与按钮对齐. 1.图片与按钮处于同一行,并居中对齐,长使用的方法如下: 按钮使用属性 vertical-algin:middle 使元素的基线与父元素 ...

点击按钮，图片和按钮的文字发生改变

点击按钮，图片和按钮的文字发生改变相关推荐

最新文章

热门文章