使用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：

-screenshot添加 - 调整大小时显示此图标。我想摆脱它。

谢谢，

此致

马丁。

Answer 1

使用css cursor属性可以轻松完成此操作。你可以在css中使用这样的东西：

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

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

或者，您可以通过将element.style.cursor属性设置为n-resize或e-resize来在JS中添加内联属性（不推荐）。