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

韧心 2016-07-05 11:58:56

<!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>

以上是我的所有代码，想要制作类似于弹幕的功能。但是在这罩层div中，我设定了style.left和style.top的属性值，可是好像无法赋值上去，x,和y都是有值的。

...全文

372 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

baidu_35524910 2016-07-06

打赏
举报

12332132134444444444444JavaScript code ? 1 2 3 4 5 var textobj = document.getElementById("textstyle"); textobj.style.left = x + "px"; textobj.style.top = y + "px"; alert(textobj.style.left); 都没设值呢怎么能打印出来呢？如果还没有，那加个绝对定位，如果还没有，看下哪里有!impoortant设置了样式

韧心 2016-07-06

打赏
举报

谢谢各位啊。。。前端不熟悉刚用。。。没概念。。懂了。。

slwsss 2016-07-05

打赏
举报

#textstyle { font-size: 11px; color: red; position: absolute; }

BunnyMelody 2016-07-05

打赏
举报

少年，看下你的代码逻辑


var textobj = document.getElementById("textstyle");
        
        textobj.style.left = x + "px";
        textobj.style.top = y + "px";
alert(textobj.style.left);

都没设值呢怎么能打印出来呢？如果还没有，那加个绝对定位，如果还没有，看下哪里有!impoortant设置了样式