DOM 基础（三）-优快云博客

本文介绍了一种使用JavaScript实现网页元素动态显示与隐藏的方法，包括登录框、图片详情和下拉菜单等常见功能。通过监听用户操作，如点击按钮或鼠标悬停，来改变元素的可见性状态。此外，还展示了如何为图片预览添加额外信息，并通过样式调整增强用户体验。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function initLogin() {
var divLogin = document.getElementById("divLogin");
divLogin.style.display = "";
}
function closeLogin() {
var divLogin = document.getElementById("divLogin");
divLogin.style.display ="none";
}
</script>
</head>
<body οnlοad="initPhotos();initUL();">
<input type="button" value="登录" οnclick="initLogin()"/><br />
<div id="divLogin" style="width:250px;display:none;position:absolute;border-style:solid;border-color:Blue;border-width:2px;color:Black">
<img src="images/cc.jpg" alt="关闭" style="float:right" οnclick="closeLogin()" />
<table id="tableLogin">
<tr><td><label for="username">用户名：</label></td><td><input type="text" id="username"/></td></tr>
<tr><td><label for="password">密 码：</label></td><td><input type="password" id="password"/></td></tr>
</table>
</div>
<br />
<script type="text/javascript">
function showDetails() {
var details = document.getElementById("details");
details.style.display = "";
}
function closeButton() {
var details = document.getElementById("divDetails");
details.style.display = "none";
}
function initPhotos() {
var data = {
"images/mm_small.jpg": ["images/MM.jpeg", "MM", "175cm"],
"images/00_small.jpg": ["images/00.jpg", "小甜甜", "165cm"],
"images/01_small.jpg": ["images/01.jpg", "小玉玉", "175cm"],
"images/02_small.jpg": ["images/02.jpg", "小猫猫", "185cm"]
};
for (var smallPhotoPath in data) {
var smallImg = document.createElement("img");
smallImg.src = smallPhotoPath;
var detailData = data[smallPhotoPath];
smallImg.setAttribute("imageSrc", detailData[0]);
smallImg.setAttribute("detailHeight", detailData[2]);
smallImg.setAttribute("detailName", detailData[1]);
smallImg.alt = "MM";
smallImg.onmouseover = function () {
document.getElementById("imgID").src = this.getAttribute("imageSrc");
document.getElementById("detailHeight").innerHTML = this.getAttribute("detailHeight");
document.getElementById("detailName").innerHTML = this.getAttribute("detailName");