問題：JavaScript使用事件onclick導緻css樣式失效
首先,我們用以下代碼得到的是一個樣式沒有失效的紅色"超連結",如下圖1
代碼1：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a{
color: red;
}
</style>
</head>
<body>
<a herf="#">超連結</a>
</body>
</html>
（圖1）
然後,發現用如下代碼時,(由圖2,圖3可知)按下按鈕以後,發現css代碼不起作用,樣式失效了
代碼2：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a {
color: red;
}
</style>
<script type="text/javascript">
function test1() {
document.write("aa")
}
</script>
</head>
<body>
<input type="button" onclick="test1()" value="按鈕"/>
<a herf="#">超連結</a>
</body>
</html>
裡面的css代碼已經不翼而飛
推斷:
1.使用onclick會導緻css樣式失效
2.用document的write方法會導緻樣式失效
顯然這些都是不成立的，是以去查閱資料得到如下結論
結論：
一個document對象一旦生成後，再次使用document.write的時候，document對象會先清空原本的所有标簽，然後再進行body上的内容。
分析 ：
- 沒按按鈕之前：代碼由上向下執行，遇到document.write的時候，document對象還沒完全生成（備注1），當執行完成後，我們用浏覽器看到生成後的頁面了，說明document對象已經生成了。
- 按按鈕：我們再來點選按鈕，再次使用document，就會導緻document對象清空所有标簽，導緻樣式CSS失效。
（備注1：document對象還沒完全生成：因為下面還有代碼沒有執行，一個标簽對應一個對象，document是儲存了所有的标簽對象，代表所有HTML的資訊，沒有執行完代表資訊沒有完全錄入到document）