1、找到標簽
獲取單個元素 document.getElementById(‘i1’)
獲取多個元素（列表） document.getElementsByTagName(“div”)
獲取多個元素（列表） document.getElementsByClassName(‘c1’)
a.直接找
document.getElementById 根據ID獲取一個標簽
document.getElementsByName 根據name屬性獲取標簽集合
document.getElementsByClassName 根據class屬性獲取標簽集合
document.getElementsByTagName 根據標簽名獲取標簽集合
2、操作標簽
innerText
獲取標簽中的文本內容
標簽.innertText
標簽賦值
標簽.innertText = “”
className
tag.className => 直接整體操作
tag.classList.add(‘樣式名’) 添加指定樣式
tag.classList.remove(‘樣式名’) 刪除指定樣式<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #6e6568;
position: fixed;
top: 0;
left:0;
right: 0;
bottom: 0;
z-index: 9;
}
.c2{
background-color: #e6e6e6;
position: fixed;
height: 300px;
width: 300px;
left:35%;
top:23%;
z-index: 10;
opacity: 0.7;
}
.hide{
display: none;
}
</style>
</head>
<body >
<input type="button" onclick="ShowModule()" value="測試">
<!--截擋層開始-->
<div id="i1" class="c1 hide"></div>
<!--字符輸入層-->
<div id="i2" class="c2 hide">
<div><span>用戶名：</span><input type="text" id="user"/></div>
<div><span>密???碼：</span><input type="password" id="password"/></div>
<div >
<input type="button" value="確定" onclick="ShowMsg()"/>
<input type="button" value="取消" onclick="addhide()"/>
</div>
</div>
<!--js腳本-->
<script>
function ShowModule() {
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function addhide() {
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
function ShowMsg() {
var name = document.getElementById("user").value;
alert(name);
}
</script>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
