问题: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>
(图1)
然后,发现用如下代码时,(由图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)