操作元素修改表单属性

最新推荐文章于 2023-02-01 11:42:35 发布

hcoke

最新推荐文章于 2023-02-01 11:42:35 发布

阅读量215

点赞数

分类专栏：学习笔记文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_62962469/article/details/123351076

版权

学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<button type="button">按钮</button>
		<input type="" name="" id="" value="输入内容" />
		<script type="text/javascript">
		//1.获取元素
			var btn = document.querySelector('button');
			var input = document.querySelector('input');
		//2.注册事件 处理程序
			btn.onclick = function() {
				// input.innerHTML = '点击了'; 这个是普通盒子如 div 标签里的内容
				input.value = '点击了';
				//如果某个表单被禁用 不能再点击 disabled    假如我们想要这个按钮button禁用
				//btn.disabled = true;
				this.disabled = true; //this指向事件函数的调用者 在这里就是指向  btn 这里与上行的代码等效  true为禁用  改为false就再启用
			}
		</script>

注意事项：innerHTML 这个是修改普通盒子如 div 标签里的内容，在上面的代码里用value修改。

禁用按钮 disabled = true 启用按钮 disabled = false

this的使用在事件中 this指向事件函数的调用者在这里就是指向btn

下面是注册输入密码显示明文的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				position: relative;
				width: 400px;
				border-bottom: 1px solid #ccc;
				margin: 100px auto;
			}

			.box input {
				width: 370px;
				height: 30px;
				border: 0;
				outline: none;
			}

			.box img {
				position: absolute;
				width: 24px;
				top: 2px;
				right: 2px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<label>
				<img src="images/icon-eye-open.png" id="eye">
			</label>
			<input type="password" name="" id="pwd" value="" />
		</div>
		<script type="text/javascript">
		//1.获取元素
			var eye = document.getElementById('eye');
			var pwd = document.getElementById('pwd');
			var flag = 0;
		//2.注册事件 处理程序	
			eye.onclick = function() {
				if (flag == 0) { // 点击之后flag一定要变化
					eye.src = 'images/icon-eye-close.png'
					pwd.type = 'text';
					flag = 1;  //给flag赋值
				} else {
					eye.src = 'images/icon-eye-open.png'
					pwd.type = 'password';
					flag = 0;
				}
			}
		</script>
	</body>
</html>

hcoke

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
操作元素修改表单属性

<button type="button">按钮</button> <input type="" name="" id="" value="输入内容" /> <script type="text/javascript"> //1.获取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); //2.注册事件.
复制链接

扫一扫