JavaScript基础之操作元素,修改元素属性

Posted 路宇

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础之操作元素,修改元素属性相关的知识,希望对你有一定的参考价值。

实现效果:

js代码如下:

<body>
		<button id="android">Android开发</button>
		<button id="java">Java开发</button><br>
		<img src="img/10b92e374bebdbe9b648ba29d1d7e72.png" title="Android">
		<script type="text/javascript">
			//事件源 
			var android = document.getElementById('android');
			var java = document.getElementById('java');
			var img = document.querySelector('img');
			//事件类型 点击
			android.onclick = function() {
				//事件处理程序 点击切换图片和鼠标经过时显示的文字信息
				img.src = 'img/10b92e374bebdbe9b648ba29d1d7e72.png';
				img.title = 'Android';
			}
			java.onclick = function() {
				img.src = 'img/221f6109f10f97406df83192d307a06.png';
				img.title = 'java';
			}
		</script>
</body>

以上是关于JavaScript基础之操作元素,修改元素属性的主要内容,如果未能解决你的问题,请参考以下文章

必备前端基础知识-第三节3:JavaScript之DOM和BOM

前端js基础

JavaScript之属性读写操作

JavaScript基础语法-DOM,前端小白必知必会

Javascript基础简单汇总:元素获取

JavaScript之DOM(上)