<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮動與display:block化</title>
<style>
.ovh { overflow: hidden; }
.red { color: #cd0000; }
[hidden] { display: none; }
</style>
</head>
<body>
<p id="first">這是一個沒有設(shè)置<code>float</code>屬性的按鈕：</p>
<p class="ovh"><input type="button" id="btnShow" value="點擊我顯示display屬性值"></p>
<p hidden="">此時，按鈕的display屬性值是：<span id="result" class="red"></span></p>
<p>點擊下面的按鈕讓上面的按鈕添加<code>float: left</code>的聲明：</p>
<p><input type="button" id="btnAdd" value="上面的按鈕添加float:left"></p>
<script>
var btnShow = document.getElementById("btnShow"),
btnAdd = document.getElementById("btnAdd"),
result = document.getElementById("result"),
first = document.getElementById("first");
if (btnShow && btnAdd && result) {
btnShow.onclick = function() {
// 獲得該按鈕的display值
var display = this.currentStyle? this.currentStyle.display: window.getComputedStyle(this, null).display;
// 顯示結(jié)果
result.innerHTML = display;
result.parentNode.removeAttribute("hidden");
// repain fix IE7/IE8 bug
document.body.className = "any";
};
// 設(shè)置浮動按鈕的點擊事件
btnAdd.onclick = function() {
btnShow.style["cssFloat" in this.style? "cssFloat": "styleFloat"] = "left";
// 文字描述的變化
this.value = "上面的按鈕已經(jīng)設(shè)置了float:left";
btnShow.value = "再次點擊我確認(rèn)display屬性值";
first.innerHTML = first.innerHTML.replace("沒有", '<del>沒有</del>');
// 結(jié)果隱藏
result.parentNode.setAttribute("hidden", "");
// 按鈕禁用
this.setAttribute("disabled", "");
};
}
</script>
</body>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
