3

良い一日！divJavaScriptを使用して、トリガーボタン/ divから小さなオフセットを持つ要素を作成する関数を作成しようとしています. 良いニュースは、効果の 1 つがトリガーされるのと同じくらい多くの要素が作成されることです。悪いニュースは、div のXとのスタイリングがY適切に機能していないことです。

コードは実際にはかなり短いです。読みやすくするためにいくつかのコメントを投稿しました。関数を実行してもエラーは発生しないため、エラーがどこにあるのか本当にわかりません。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /*What will be created*/
        .box {
            width: 30px;
            height: 30px;
            background-color:red;
            }

        /*The positioning for the first button*/
        .btm12 {
            margin-left:50%;
            margin-top:5%
            }

        /*The positioning for the second button*/
        .btm1 {
            margin-left:30%;
            margin-top:10%
            }
    </style>
</head>
<body>
    <button id="btn" onclick="createBox()" class="btm1">Click me</button><br />
    <button id="btn2" onclick="createBox()" class="btm12">Click me</button>
</body>
</html>
<script>
    document.getElementById("btn").onclick = function () { createBox(this.id); };
    document.getElementById("btn2").onclick = function () { createBox(this.id); };

    function createBox(IDI) {
        //get reference to the element
        var element = document.getElementById(IDI); 

        //a way we can acces the X and Y coordinates
        var position = element.getBoundingClientRect();
        var x = position.left;
        var y = position.top;

        //create, style and set the X/Y of the the div element
        var box = document.createElement("div");
        box.className = "box";
        box.style.left = x;
        box.style.top = y -10;
        box.style.position = "absolute";

        //Apend the element to the body
        document.body.appendChild(box);
    }
</script>
4

1 に答える 1

1

この方法でスタイル値を設定する場合は、スタイル値に「px」を追加する必要があります。見る：

    box.style.left = x+"px";
    box.style.top = (y -10)+"px";

フィドル: http://jsfiddle.net/MLmCM/

于 2013-06-30T08:37:28.970 に答える