JavaScript使用事件onclick导致css样式失效问题

问题：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）

JavaScript使用事件onclick导致css样式失效问题相关推荐

Filter过滤器导致CSS样式失效
F12打开控制台看到如下警告: 问题代码: public class CharacterEncodingFilter extends HttpFilter {@Overridepublic void ...
本机配置nginx后css样式失效
现象:nginx启动后,js.html可以加载,但是引用的css样式失效. 原因:nginx配置问题发现过程: 查看引用失效的css文件后发现请求头中Accept为text/css ...
Vue 项目部署出现css样式失效的解决方案
Vue 项目部署出现css样式失效的解决方案参考文章: (1)Vue 项目部署出现css样式失效的解决方案 (2)https://www.cnblogs.com/Desmondexperience/ ...
css样式让样式失效,如何让css样式失效
让css样式失效的方法:1.通过更改元素名称,来达到让此区域css失效的目的:2.通过设置优先级高的css样式来覆盖此css样式使其失效. 本教程操作环境:windows7系统.css3版,DELL ...
Django解决css样式失效问题最终方法
由于Django对css的支持不是很友好,有时候我们明明写了相应的css代码,但是引入css文件的时候前端没有效果,找了很多方法来解决都没能最终解决,终于在一个帖子上看到一个方法,对解决css样式 ...
sharepoint 编程_SharePoint 2010-以编程方式将JavaScript，元标记和CSS样式添加到每个页面的页眉
sharepoint 编程 For SharePoint sites, particularly public-facing ones, there are times when adding Jav ...
javascript、jquery 动态修改css样式方法
javascript.jquery 动态修改css样式方法 javascript 修改样式的方法第一种.使用obj.className来修改样式表的类名 var obj = document.get ...
服务器怎么控制忽略样式_使用JavaScript来编写你的CSS样式代码——JSS
介绍 JSS是CSS的创作工具,它允许你使用JavaScript以声明,无冲突和可重用的方式描述样式.它可以在浏览器,服务器端或在构建时在Node中编译.JSS与框架无关.它由多个包组成:核心部分,插 ...
vue项目打包部署后css样式失效
项目部署后,样式失效,很奇怪,审查元素发现没有样式,不过却加载了css文件,问题出在哪里呢? 发现不是路径问题,而是加载的不对,content-type:text-plain,而不是content-t ...

JavaScript使用事件onclick导致css样式失效问题

问题：JavaScript使用事件onclick导致css样式失效

推断:

结论：

分析：

JavaScript使用事件onclick导致css样式失效问题相关推荐

最新文章

热门文章

JavaScript使用事件onclick导致css样式失效问题

问题：JavaScript使用事件onclick导致css样式失效

推断:

结论：

分析 ：

JavaScript使用事件onclick导致css样式失效问题相关推荐

最新文章

热门文章

分析：