第一课：初始JavaScript

最新推荐文章于 2025-07-30 06:00:00 发布

桑丘紫言

最新推荐文章于 2025-07-30 06:00:00 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_39209728/article/details/79555429

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用HTML、CSS及JavaScript实现一个简单的鼠标提示框效果。当鼠标悬停在输入框上时，提示信息会以div的形式显示；鼠标离开时，提示信息消失。此外，还展示了如何改变div的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+CSS静态网页
js 交互、功能

第一个js效果---鼠标提示框

鼠标移入到input上的时候，让div显示
鼠标移除input让div隐藏

div1显示： block

----------------------------------

事件

onclick

----------------------------------

div1.style.display='block'
. 的
div1的style的display
= 赋值
document.getElementById

兼容性问题
chrome
ff

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{width:200px;height:100px; border:1px solid #999; background-color:#CCC;
	display:none;}
</style>
</head>
<body>
<!--注释 -->
<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'" 
onmouseout="document.getElementById('div1').style.display='none'"/>
<div id="div1" >
为了您的信息安全
</div>
</body>
</html>

=======================================
get Element By Id 通过id获取元素
获取元素用 id

--------------------------------
属性
特性特点

blue.名字 blue
blue.性别男
blue.身高 173

-----------------------------------

重用

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{width:200px; height:200px; background:red;}
</style>
<script>
function toGreen(){
	var odiv = document.getElementById('div1');
	document.getElementById('div1').style.width='300px';
	document.getElementById('div1').style.height='300px';
	document.getElementById('div1').style.background='green';
	}
function toRed(){
	document.getElementById('div1').style.width='200px';
	document.getElementById('div1').style.height='200px';
	document.getElementById('div1').style.background='red';
	}
</script>
</head>

<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()">
</div>
</body>
</html>