小编典典

如何使用CSS`resize`将元素的大小调整为小于Chrome上的初始高度/宽度的高度/宽度?

css

我刚刚在Chromium上看到了

  • resize:vertical或的情况下,我无法将元素的大小调整为小于其初始高度的高度。resize:both
  • resize:horizontal或的情况下,无法将元素的大小调整为小于其初始宽度的宽度resize:both

我已经阅读了w3c规范,我想问题是因为这样的:

用户代理 可以 将调整大小的范围限制在适当的范围内,例如介于元素的 原始格式化大小 之间,并且必须足够大以包含所有元素的内容。

即使Chrome应用了以上段落,有没有办法做到这一点?

注意 :我使用Chromium 30.0.1592.0(216775)


阅读 391

收藏
2020-05-16

共1个答案

小编典典

Javascript解决方案:

function resizableStart(e){
    this.originalW = this.clientWidth;
    this.originalH = this.clientHeight;
    this.onmousemove = resizableCheck;
    this.onmouseup = this.onmouseout = resizableEnd;
}
function resizableCheck(e){
    if(this.clientWidth !== this.originalW || this.clientHeight !== this.originalH) {
        this.originalX = e.clientX;
        this.originalY = e.clientY;
        this.onmousemove = resizableMove;
    }
}
function resizableMove(e){
    var newW = this.originalW + e.clientX - this.originalX,
        newH = this.originalH + e.clientY - this.originalY;
    if(newW < this.originalW){
        this.style.width = newW + 'px';
    }
    if(newH < this.originalH){
        this.style.height = newH + 'px';
    }
}
function resizableEnd(){
    this.onmousemove = this.onmouseout = this.onmouseup = null;
}

var els = document.getElementsByClassName('resizable');
for(var i=0, len=els.length; i<len; ++i){
    els[i].onmouseover = resizableStart;
}

上面的解决方案使用mouseover和mouseout触发resizableStart和resizableEnd。问题是,如果要调整大小的元素具有子元素,则将鼠标放在子元素上时,该元素会收到一个mouseout事件,并且紧随其后,它会收到一个mouserover从子元素冒泡的事件。

2020-05-16