DOM系列之元素的属性操作


1、常用元素的属性操作

src、href
id、alt、title

1.1、获取属性的值

元素对象.属性名

1.2、设置属性的值

元素对象.属性名 =

1.3、示例

<body>
	<button id="ldh">刘德华</button>
	<button id="zxy">张学友</button> <br />
	<img src="images/ldh.jpg" alt="" title="刘德华" />
	<script>
		// 修改元素属性  src
		// 1. 获取元素
		var ldh = document.getElementById("ldh");
		var zxy = document.getElementById("zxy");
		var img = document.querySelector("img");
		// 2. 注册事件  处理程序
		zxy.onclick = function () {
    
    
			img.src = "images/zxy.jpg";
			img.title = "张学友思密达";
		};
		ldh.onclick = function () {
    
    
			img.src = "images/ldh.jpg";
			img.title = "刘德华";
		};
	</script>
</body>

2、表单元素的属性操作

利用表单DOM可以操作如下表单元素的属性:

type、value、checked、selected、disabled

2.1、获取属性的值

元素对象.属性名

2.2、设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型。

2.3、示例

<body>
	<button>按钮</button>
	<input type="text" value="输入内容" />
	<script>
		// 1. 获取元素
		var btn = document.querySelector("button");
		var input = document.querySelector("input");
		// 2. 注册事件 处理程序
		btn.onclick = function () {
      
      
			// 表单里面的值 文字内容是通过 value 来修改的
			input.value = "被点击了";
			// 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
			// btn.disabled = true;
			this.disabled = true;
			// this 指向的是事件函数的调用者 btn
		};
	</script>
</body>

后记

如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※!!!

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_62277266/article/details/125862114