如何使用javascript在html文件中动态绘制矩形？Google chrome扩展页面标尺也有类似的功能

我想在HTML文件中的文本或段落上绘制矩形。我想在不使用画布的情况下使用javascript实现这一点。也可以存在多个矩形来选择多个段落。有没有实现这种功能的库

---

此处的page Ruler链接

如果要突出显示纯

p

元素，可以操纵段落的backgroundColor属性，但必须确保它们显示为

内联块

document.getElementById（'bttn'）。addEventListener（'click'，高亮显示）；
函数高亮显示（）{
var p=document.getElementById（'target'）；
p、 style.backgroundColor='#ff0000'；//更改背景色
}

这是一个段落。
这是另一段

单击此处突出显示

您可以使用绝对定位的

div

元素在网页上绘制一个矩形。当用户按下鼠标按钮（

mousedown

），当用户移动鼠标（

mousemove

），以及当用户释放按钮（

mouseup

）时，您需要监听事件。下面是一个简单的例子：

const rectangle = document.createElement("div");
rectangle.style.position = "absolute";
rectangle.style.backgroundColor = "rgba(204,230,255, 0.7)";
rectangle.style.border = "1px dashed black";
document.body.appendChild(rectangle);

    let isDragged = false;
    let rectangleCoords = [];

    const clearRectangleCoords = () => {
        rectangleCoords = [];
    };

    const addFirstRectangleCoords = coords => {
        rectangleCoords[0] = coords;
    };

    const addSecondRectangleCoords = coords => {
        rectangleCoords[1] = coords;
    };

    const redrawRectangle = () => {
        const top = Math.min(rectangleCoords[0].y, rectangleCoords[1].y);
        const height = Math.max(rectangleCoords[0].y, rectangleCoords[1].y) - top;
        const left = Math.min(rectangleCoords[0].x, rectangleCoords[1].x);
        const width = Math.max(rectangleCoords[0].x, rectangleCoords[1].x) - left;
      rectangle.style.top = top + "px";
      rectangle.style.height = height + "px";
      rectangle.style.left = left + "px";
      rectangle.style.width = width + "px";
    };

    window.addEventListener("mousedown", e => {
        isDragged = true;
      clearRectangleCoords();
      addFirstRectangleCoords({x: e.pageX, y: e.pageY});
      addSecondRectangleCoords({x: e.pageX, y: e.pageY});
      redrawRectangle();
    });

    window.addEventListener("mousemove", e => {
        if (isDragged) {
        addSecondRectangleCoords({x: e.pageX, y: e.pageY});
        redrawRectangle();
      }
    });

    window.addEventListener("mouseup", e => {
        if (isDragged) {
        addSecondRectangleCoords({x: e.pageX, y: e.pageY});
        redrawRectangle();
            isDragged = false;
      }
    });

---

您可以在

上使用代码，这些矩形仅用于用户界面。你可以在这些文本或段落的容器上使用

边框：1px solid

吗？我还需要得到矩形角的位置。欢迎使用堆栈溢出！在StackOverflow，我们帮助您解决问题，而不是为您工作。您必须尝试这样做，如果您遇到任何问题，我们将很乐意帮助您。请通读HTML/javascript教程，并尝试了解如何做到这一点。ز这对于一个矩形很好。如果我想在绘制上一个矩形后再绘制下一个矩形，我应该做什么更改？我做一些更改以允许绘制更多的矩形。可以使用右键单击删除矩形。