JavaScript对HTML的查找与修改实训

最新推荐文章于 2024-08-04 16:33:59 发布

₯㎕๓安笙

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量243

点赞数 1

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/Cry859098570/article/details/105642414

版权

JavaScript学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在JavaScript中可以对html中的元素进行属性和样式的修改

首先对html中的元素进行查找，查找html标签有以下几种方法：

通过 id 查找 HTML 元素
document.getElementById()，参数填入id值即可返回id一样的元素。
通过标签名查找 HTML 元素
document.getElementsByTagName()，参数填入标签即可返回所有该标签。
通过类名查找 HTML 元素
document.getElementsByClassName()，参数填入类名即可返回所有相同类名的元素。

然后即可对元素的属性和样式进行修改：

改变属性的值
使用查找返回的元素对象.属性值=" "；进行修改。
改变元素样式

使用查找返回的元素对象.style.CSS属性=" "；进行修改。

onmouseover事件：鼠标移动都某个指点的HTML标签上，执行的事件。

onmouseout事件：鼠标移出某个指点的HTML标签后，执行的事件。

示例：

在这里插入图片描述
我们可以使用这结合两个事件实现一些页面交互效果，例如上图，当鼠标移动到微信图标上的时候显示二维码，移出时二维码消失，显示微信图标。

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//当鼠标移入执行此方法
			function onover(){
				var msg=document.getElementById("msg").innerHTML="作者微信二维码";
				var wechat=document.getElementById("wechat");
				wechat.src="img/Wechat.jpg";
				wechat.style.width="200px";
				wechat.style.height="200px";
			}			
			//当鼠标移出执行此方法	
			function onout(){
				var msg=document.getElementById("msg").innerHTML="";
				var wechat=document.getElementById("wechat");
				wechat.src="img/icon.png";
				wechat.style.width="30px";
				wechat.style.height="30px";
			}
		</script>
	</head>
	<body>
		<div align="center">
			<img id="wechat" src="img/icon.png" width="30" height="30" onmouseover="onover()" onmouseout="onout()" />
			<p id="msg"></p>
		</div>
	</body>
</html>

₯㎕๓安笙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript对HTML的查找与修改实训

onmouseover事件：鼠标移动都某个指点的HTML标签上，执行的事件。onmouseout事件：鼠标移出某个指点的HTML标签后，执行的事件。我们可以使用这两个事件实现一些页面交互效果，例如上图，当鼠标移动到微信图标上的时候显示二维码，移出时二维码消失，显示微信图标。
复制链接

扫一扫

专栏目录