使用 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-resize 来在JS 中添加属性内联（不推荐）。