首頁 > 開發者 > JavaScript
前言:下面我們接著旅程5繼續我們的JavaScript Dom征程6,通過這篇博文的學習我們能夠非常容易的操作層的變化,在這片博文中我也用了很多小例子來說明我所說的每個知識點,比如:顯示隱藏層,動態載入層的寬度高度,還有跟著滑鼠飛的小例子。學習就是舉一反三的舉動，所以當我們摘掉這些的時候我們可以自己在擴充寫出很多網頁上面經常使用的例子的。
(1) 控制層的顯示
修改style.display,例子：切換層的顯示
<script type="text/javascript">
function toggelDiv(cb) {
var div1 = document.getElementById("div1");
if (cb.checked) {
div1.style.display = ""; //display沒有值就是顯示
}
else {
div1.style.display = 'none'; //none不顯示
} }
</script>
</head>
<body>
<input type="checkbox" id="cbShow" onclick="toggelDiv(this)" />
<label id="cbShow1">顯示進階選項</label>
<div id="div1" style="display:none">韓迎龍</div>
</body>
(2) 案例1：滑鼠放到一個超連結的時候,顯示一個黃色背景,帶圖片的懸浮提示,滑鼠離開就消失,提示:滑鼠進入控制項的事件是onmouseover,離開的事件是onmouseout。
<a href="http://www.cnblogs.com" onmouseout="document.getElementById('buDiv').style.display='none'"
onmouseover="document.getElementById('buDiv').style.display=''">部落格園</a>
<div id="buDiv" style="display:none; border-color:Green; border-style:dotted; border-width:1px;">
<font color="red">韓迎龍</font>一定要好好學習.NET</div>
(3) IE中body的事件範圍
IE中如果在body上面添加onclick，onmousemove等事件響應，那麼如果頁面沒有滿，則“body中最後一個元素(橫向不限制)”的部分是無法響應事件的，必須使用代碼在document上面監聽那些事件，比如：document.onmousemove=MovePic;
(1) <body onclick="alert('hello')">
韓迎龍<br /><br /><br /><br /><br /><br /><br /><br />
</body>
(2) <script type="text/javascript">
function body() {
alert('hell0');
}
document.onclick = body;
</script>
(1) 通過Dom讀取元素的top，left，width,height等取到的值不是數字，而是”10px”這樣的字串，為這些屬性設值IE可以是80,90這樣的數字，FF必須是”80px”,”90%”等這樣的字串形式，為了相容統一用字串形式。
(2) 如果要修改元素的大小（寬度加10），則首先要取出元素的寬度，然後用ParseInt將寬度轉換為數字，ParseInt可以將”20px”這樣數字開頭的包含其他內容的字串解析為20，parseInt(“20px”,10)，也就是解析儘可能多的部分，然後加上一個值，再加上px賦值回去。
<script type="text/javascript">
function incWidth() {
var oldwidth = document.getElementById('div1').style.width;
oldwidth = parseInt(oldwidth, 10);
oldwidth += 50;
//oldwidth = oldwidth + 50; //50px50
document.getElementById("div1").style.width = oldwidth;
}
</script>
<input type="button" value="單位" style="width:50%" />
<div id="div1" style="width:50px; height:50px; border-style:dotted; border-width:1px; border-color:Red">好好學習.NET</div>
<input type="button" onclick="alert(document.getElementById('div1').style.width)" value="取值" />
<input type="button" onclick="document.getElementById('div1').style.width='100px'" value="設值" />
<input type="button" onclick="incWidth()" value="自動加寬" />
<input type="button" onclick="alert(parseInt('50px50px',10))" value="ParseInt" />
(1) 元素的position樣式值：static(無定位，顯示在預設位置)，absolute(絕對位置)，fixed(相對於視窗的固定定位，位置不會隨著瀏覽器的流動而變化，IE6不支援)，relative(相對元素預設位置的定位)，如果要通過代碼修改元素的座標則一般使用absolute,然後修改元素的top(上邊緣距離)，left(左邊緣距離)兩個樣式值
<input type="button" value="按鈕" style="position:absolute; top:200px; left:200px" />
(2) 案例1：跟著滑鼠飛的圖片，提示：滑鼠移動的事件是onmousemove(一邊移動事件一邊觸發，而不是移動開始或者完成後才觸發)，通過window.event的clientX，clientY屬性獲得滑鼠的位置。
<script type="text/javascript">
document.onmousemove = function () {
var x = window.event.clientX;
var y = window.event.clientY;
var divFly = document.getElementById("divFly");
if (!divFly) {
return;
}
divFly.style.left = x; //left,top都是指的層的左上方座標
divFly.style.top = y;
}
</script>
<body>
<input type="button" value="按鈕" style="position:absolute; top:200px; left:200px" />
<div id="divFly" style="position:absolute">
<img src="png-0015.png" /><br />我是，你猜？
</div>
</body>
(3)案例2：滑鼠放到一個超連結的時候，在滑鼠的位置顯示一個黃色背景，帶圖片的懸浮提示，滑鼠離開的時候就消失，提示：滑鼠進入控制項的事件是onmouseover,滑鼠離開控制項的事件是：onmouseout。
<style type="text/css">
.tooltip{
background-color:Yellow;
border-style:solid;
border-width:1px;
border-color:Red;
}
</style>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.onmouseover = LinkMouseOver;
link.onmouseout = LinkMouseOut;
}
}
function LinkMouseOver() {
var div = document.createElement("div"); //動態建立層
div.className = "tooltip"; //設定樣式，美觀，第二個作用是方便LinkMouseOut找到層
div.style.position = "absolute";
div.style.top = window.event.clientY; //指定座標
div.style.left = window.event.clientX;
div.innerHTML = "經常瀏覽的網站<font color='red'>韓迎龍</font>";
document.body.appendChild(div); //createElement只是記憶體模型，只有appendChild到一個可視元素中才會被顯示出來
}
function LinkMouseOut() { //滑鼠離開時隱藏或者刪除層
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className == "tooltip") { //隱藏或者刪除class='tooltip'的層
document.body.removeChild(div);
//div.style.display = "none"; //隱藏的話會造成記憶體泄露
}
}
}
</script>
<body onload="initEvent()">
<a href="http://www.cnblogs.com">部落格園</a><br /><br /><br />
<a href="http://www.baidu.com">百度</a><br /><br /><br />
<a href="http://www.sina.com">新浪</a>
</body>
(4)案例3：點擊按鈕層動態增大。提示：英文連續單詞不會自動換行的陷阱
<script type="text/javascript">
var showIntervalId;
function showDiv() {
showIntervalId = setInterval("inc()", 10);
}
function inc() {
var div1 = document.getElementById("div1");
var oldwidth = div1.style.width;
oldwidth = parseInt(oldwidth, 10);
var oldheight = div1.style.height;
oldheight = parseInt(oldheight, 10);
if (oldwidth >= 200) {
clearInterval(showIntervalId);
}
oldwidth += 10;
oldheight += 10;
div1.style.width = oldwidth + "px";
div1.style.height = oldheight + "px";
}
</script>
<div id="div1" style="width:10px; height:100px; border-style:solid; border-color:Red; border-width:1px;">
莊子做夢變成蝴蝶，蝴蝶做夢變成莊子，陳摶老祖一睡八百年，睡出大宋盛世清年，蘇乞兒一睡，在夢中學的...
莊子做夢變成蝴蝶，蝴蝶做夢變成莊子，陳摶老祖一睡八百年，睡出大宋盛世清年，蘇乞兒一睡，在夢中學的...
</div>
<input type="button" value="放大" onclick="var div1=document.getElementById('div1');
div1.style.width='200px';div1.style.height='200px'" />
<input type="button" value="動態放大" onclick="showDiv()" />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
