如何巧妙的用好set和get，给HTMLDivElement原型添加多个属性并且可以拖拽

//   获取到两个div;

    var div0=document.querySelector(".div0");

    var div1=document.querySelector(".div1");

    // 给HTMLDivElement这类元素的原型上添加多个属性；

    Object.defineProperties(HTMLDivElement.prototype,{

        // 这个是为了设置后面的div拖拽的哦

        // 设置为可修改，然后值为false;

        _drag:{

            writable:true,

            value:false,

        },

        // 设置宽度，

        width:{

            set:function(_v){

                this.style.width=_v.toString().indexOf("px")>-1 ? _v : _v+"px";

            },

            get:function(){

                return parseFloat(getComputedStyle(this).width);

            }

        },

        // 设置高度；

        height:{

            set:function(_v){

                this.style.height=_v.toString().indexOf("px")>-1 ? _v : _v+"px";

            },

            get:function(){

                return parseFloat(getComputedStyle(this).height);

            }

        },

        // 设置背景色

        bgColor:{

            set:function(_v){

                this.style.backgroundColor=(typeof _v==="string") ? _v : "#"+_v.toString(16).padStart(6,"0");

            },

            get:function(){

                return parseFloat(getComputedStyle(this).backgroundColor);

            }

        },

        // 设置拖拽的

        drag:{

            set:function(_v){

                this._drag=_v;

                if(_v){

                    this.style.position="absolute";

                    return this.addEventListener("mousedown",this.dragHandler);

                }

                this.removeEventListener("mousedown",this.dragHandler);

            },

            get:function(){

                return this._drag;

            }

        },

        dragHandler:{

                value:function(e){

                    if(e.type==="mousedown"){

                        e.preventDefault();

                        document.target=this;

                        document.offset={x:e.offsetX,y:e.offsetY};

                        document.addEventListener("mousemove",this.dragHandler)

                        document.addEventListener("mouseup",this.dragHandler)

                    }else if(e.type==="mousemove"){

                        // 如果是mousemove那么就拖拽

                        this.target.style.left=e.clientX-this.offset.x+"px";

                        this.target.style.top=e.clientY-this.offset.y+"px";

                    }else if(e.type==="mouseup"){

                        // 如果是mouseup那么就删除侦听，不让拖拽

                        document.removeEventListener("mousemove",this.target.dragHandler)

                        document.removeEventListener("mouseup",this.target.dragHandler)

                    }

                }

            }

    })

 

        // 属性都是设置在原型上的，因为div是HTMLDivElement类型的，所以直接就可以调用

        div0.width=100;

        div0.height=100;

        div0.bgColor="red";

        div1.width=50;

        div1.height=50;

        div1.bgColor="skyblue";

 

        // 这里调用一个button

        bn=document.querySelector("button");

        // 并且给按钮添加点击事件

        bn.addEventListener("click",clickHandler);

        // 当点击按钮时，因为_drag的初始值是false，并且可修改，就相当于boolean值设置了一个开关

 

        // 因此就可以完成拖拽。

        function clickHandler(e){

            div0.drag=!div0.drag;

            div1.drag=!div1.drag;

        }