javascript - 使用 JS 调整大小时的 Chrome 图标

Question

我已经在 javascript 中实现了调整元素大小的一些实现

this.resize = (event) => {
        event.preventDefault();
        if (!this.isResizable()) {
            return;
        }
        if (this.isHorizontal()) {
            this.resizeHorizontally(event);
        } else {
            this.resizeVertically(event);
        }
    };

    this.resizeHorizontally = (event) => {
        event.preventDefault();
        const target = event.target;
        const offsetFromScreen = window.innerHeight - target.parentElement.clientHeight;
        const parentHeight = target.parentElement.clientHeight;
        const dragRelPosY = event.clientY - offsetFromScreen;
        if (dragRelPosY > 0) {
            this.setRatio(parentHeight, dragRelPosY);
        }
    };

    this.resizeVertically = (event) => {
        event.preventDefault();
        const target = event.target;
        const parentOffsetFromScreen = target.parentElement.offsetLeft;
        const parentWidth = target.parentElement.clientWidth;
        const dragRelPosX = event.clientX - parentOffsetFromScreen;
        if (dragRelPosX > 0) {
            this.setRatio(parentWidth, dragRelPosX);
        }
    };

所以它正在调整这个元素的大小。它工作正常，但我想在调整大小时禁用“限制”图标。它发生在 Chrome 中。有人可以给我一些提示吗？

更新 1:

-已添加屏幕截图-调整大小时会显示此图标。我想摆脱它。

谢谢

问候，

马丁。

Answer 1

这可以通过使用 css cursor 属性轻松完成。你可以在 css 中有这样的东西:

.verticalResize {
    cursor: n-resize;
}
.horizontalResize {
    cursor: e-resize;
}

并将这些类添加到您的调整大小元素中。

或者，您可以通过将 element.style.cursor 属性设置为 n-resize 或 e 在 JS 中添加内联属性(不推荐) -调整大小。