页面加载时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>

javascript

html5 html css

阅读 3.5k

3 个回答

kikong

✓ 已被采纳

监听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>