0

これは私のコードです。jquery を使用せずに JavaScript だけでサイズ変更ボックスを作成することを好みます。コードをドラッグすると段落の幅を変更できますが、期待どおりに動作しないようです。

<html>
<head>
<style>

div{
    border: 1px solid black;
    width: 500px;
    height: 500px;
    padding: 0px;
    margin: 0px;

}

p{
    border: 1px solid red;
    position: absolute;
    height: 200px;
    width: 200px;
    padding: 0px;
    margin: 0px;
}
</style>
<script>
window.onload = function(){

    document.body.onmousedown = function(event){

         var mouseStartX = event.clientX;
         var mouseStartY = event.clientY;
       var div = document.getElementsByTagName("div");

       var para = document.createElement("p");

       div[0].appendChild(para);



         document.styleSheets[0].cssRules[1].style.top = mouseStartY;
              document.styleSheets[0].cssRules[1].style.left = mouseStartX;



        document.body.onmousemove = function(event){

            if(para){

            document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;



            }


        }

       document.body.onmouseup = function(){
            div[0].removeChild(para);

       }


    };

};
</script>
</head>
<body>
<div>



</div>
</body>
</html>

私の問題は、マウスを右にドラッグするとpが拡大し続けることを期待していますが、特定のポイントにドラッグした場合にのみ機能します

4

3 に答える 3

1

使用する：

document.body.onmousemove = function (event) {
    if (para) {
        document.styleSheets[0].cssRules[1].style.width = event.clientX - mouseStartX;
    }
}

それ以外の：

document.body.onmousemove = function (event) {
    if (para) {
        document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;
    }
}

それ以外の場合、p要素は水平方向ではなく垂直方向の動きでのみサイズ変更されます。

于 2013-07-05T16:24:15.840 に答える