前端JS制作弹幕问题，style.left和style.top的值无法赋上

2016-07-05 11:58:56 490 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

前端100道八股文+50道场景题闭包是指一个函数能够访问它外部函数作用域中的变量，即使外部函数已经执行完毕。形成闭包需要三个条件：函数嵌套、内部函数引用外部变量、外部函数返回内部函数。闭包的主要作用有三个：第一，实现数据私有化。比如可以用闭包创建私有变量，外部无法直接访问，只能通过特定方法操作。第二，模块化。可以用闭包封装代码，只暴露需要的接口。第三，函数柯里化和防抖节流等高级技巧都会用到闭包。闭包的缺点是可能造成内存泄漏。因为闭包引用的外部变量不会被垃圾回收，如果大量使用闭包且不及时清理，会占用过多内存。阅读详情

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <style type="text/css">

    .container {

        background-color: #FFFFFF;

        width: 600px;

        height: 500px;

    }

    

    .tanmu {

        width: 600px;

        height: 500px;

        background-color: #060606;

    }

    

    #textstyle {

        font-size: 11px;

        color: red;

    }

    </style>

    <script type="text/javascript">

    function tanmu() {

        var text = document.getElementById("text");

        var tanmu = document.getElementById("tanmu");



        var textinnelHTML = "<font id=\"textstyle\">" + text.value + "</font>";

        alert(textinnelHTML);

        var x = tanmu.offsetWidth;



        var y = Math.round(Math.random() * tanmu.offsetHeight);



        tanmu.innerHTML = textinnelHTML;



        var textobj = document.getElementById("textstyle");

        alert(textobj.style.left);

        textobj.style.left = x + "px";

        textobj.style.top = y + "px";

    }

    </script>

</head>



<body>

    <div class="container">

        <div class="tanmu" id="tanmu"></div>

    </div>

    <input type="text" value="这是弹幕" id="text" />

    <input type="button" value="发送" onclick="tanmu();" />

</body>



</html>