页面加载时js修改div的大小问题
问题是这样子的，如果我在页面定义了一个200(W)x100(H)的div，然后再通过js来修改这个div的宽度为100，浏览器加载该页面的时候，理论上我们应该是先看到一个200x100的div，然后再一闪变成了一个100x100的div，那么现在的问题是，我想实现的是浏览器加载到完成的这一个过程，我始终看到的是100x100的div，而不是由200x100的div一闪变成一个100x100的div，请问各位这个应该如何实现，有没有一些比较靠谱的做法呢？谢谢！！
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#div1 { width: 200px; height: 100px; background: red; }
</style>
</head>
<body>
<div id='div1'></div>
<script>
window.onload = function() { document.querySelector('#div1').style.width = '100px'; };
</script>
</body>
</html>
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
IT从业
监听document的ready事件，在DOM树加载完成但是还没有渲染的时候，执行JS脚本
那么等JS执行完成后，div的style已经变化，渲染的时候就按你最新的大小显示使用jQuery的代码
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../script/jquery-2.1.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { document.querySelector('#div1').style.width = '100px'; }); //window.onload = function() { document.querySelector('#div1').style.width = '100px'; }; </script> <style> #div1 { width: 200px; height: 100px; background: red; } </style> </head> <body> <div id='div1'></div> </body> </html>2019-07-17 19:28:41赞同 展开评论
相关问答