问题：JavaScript使用事件onclick导致css样式失效
首先,我们用以下代码得到的是一个样式没有失效的红色”超链接”,如下图1
代码1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a{
color: red;
}
</style>
</head>
<body>
<a herf="#">超链接</a>
</body>
</html>
然后,发现用如下代码时,(由图2,图3可知)按下按钮以后,发现css代码不起作用,样式失效了
代码2：
<!DOCTYPE html>
<html lang="en">
<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）