虛心請教，謝謝！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>absolute的破壞性</title>
<style>
.box {
??? padding: 10px;
??? background-color: #f0f0f0;?? ?
}
input {
??? position: absolute; top: 234px;?? ?
?? ?width: 160px; height: 32px;
?? ?font-size: 100%;
}
</style>
</head>
<body>
<div class="box"><img id="image" src="http://img1.sycdn.imooc.com//54447b06000171a002560191.jpg" width="256" height="191"></div>
<input id="button" type="button" value="圖片absolute化">
<script>
var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button");
if (eleImg != null && eleBtn != null) {//為啥要加圖像和按鈕都不為空的條件，這兩對象ID不變，通過ID獲得的對象一直都有，難道有為空的情況嗎？為空又是什么意思？
?? ?eleBtn.onclick = function() {
?? ??? ?if (this.absolute) {
?? ??? ??? ?eleImg.style.position = "";
?? ??? ??? ?this.value = "圖片absolute化";
?? ??? ??? ?this.absolute = false;//點擊后this.absolute只在if條件中判斷一次，條件為真就執行這塊代碼，假就執行else語句。第一次點擊按鈕時執行到這步，this.absolute = false,必須接著執行else語句才能實現圖片absolute化的效果，不就相當于又判斷了一次this.absolute嗎？總之，圖片第一次absolute化得點擊兩次。/？
?? ??? ?} else {
?? ??? ???? eleImg.style.position = "absolute";
?? ??? ??? ?this.value = "圖片去absolute";
?? ??? ??? ?this.absolute = true;
?? ??? ?}
?? ?};
}
</script>
</body>
</html>
2017-08-14
按鈕的內容和實際要操作DOM是相反的,意思是當按鈕顯示的是圖片去absoloute化,其實DOM內容已經是absolute了.不知道這樣說會不會好一點.if判斷語句的意思是,當圖片已經進行過定位,老師的那種寫法(this.ansolute)==(this.absolute==true)==>poistion:absolute是有值的(這個是圖片的)這種狀態,就修改按鈕的顯示樣式this.value,然后當你點擊之后得把下次要判斷的值修改了this.absolute,他是不會自動修改的
2017-08-14
你看不到背景顏色的變化么,當你點擊了之后,圖片absolute話,外在表現就是父元素高度塌陷,背景顏色變少了.你仔細去看看好么.圖片absolute化并不是圖片不在了,而是脫離了文檔流而已
2017-08-14
我點擊一次就可以啊...-_-~!
2017-08-11
根據我的個人理解:
第一個問題是:瀏覽器的渲染機制問題,當js的文件的加載會阻止dom的加載，也就是說當代碼執行完畢時，代碼會按照從上往下的順序執行，在執行到JS腳本文件時，有可能CSS和HTML文件沒有全部渲染完畢，在網絡情況不好的情況下，效果更明顯，如果圖片都沒有加載完，那么這段腳本文件就沒有執行的意義了.如果想讓所有文件加載完畢，可以使用很多種方法解決,例如
window.onload=function(){老師的JS代碼}。。可以自行百度，這種代碼在JS中的特性也稱健壯性的JS
第二個問題：首先我們要有兩個問題要弄明白,一:if/elseif/else語句只能有一個結果，當這個結果一旦選中入口this.absolute時就不可能在執行else語句了.
第二，老師那一句?this.absolute = false是修改了狀態，但是if這條分支結構的結果已經執行完了，下面的語句并不會因為你修改了此狀態進行連續的觸發. ? ?要知道觸發的是單機事件，只有單擊事件被觸發了才能再次去判定this.absolute的狀態，所以不存在連續觸發的情況。