JavaScript文档对象模型document对象改变Html表单属性(4)

1.document对象改变Html表单属性

更改Html元素内容时候可以用innerHtml属性进行修改,但是表单元素只能用value属性修改元素内容
在这里插入图片描述
案例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>点我</button>
		<input type="text" value="">
		<script>
			//获取元素对象
			var btn = document.querySelector('button');
			var input = document.querySelector('input');
			btn.onclick = function() {
      
      
				input.value = '被点击了';
				//当点击一次之后按钮就被禁用
				//如果想要某个表单被禁用 不能再点击则使用disabled属性
				// btn.disabled = true; //true的话是被禁用,false是不被禁用
				this.disabled = true;	//this指向的是事件函数的调用者 btn
										//说白了就是this表示获取当前操作的标签或者元素对象
			}
		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_45308912/article/details/121200282