应用 css :after with javascript (没有 jquery)

Question

我发现这段代码可以在 div 中创建对角线。

https://jsbin.com/tefakagohi/edit?html,css,output

我正在尝试在 JS 中制作一个线条生成器。但是我想使用js完全创建这个对象......

从 document.createElement() 等开始......

我这里有一些代码：

function createLine(name, x1, y1, x2, y2, color){

var rectX1;

var rectY1;

var rectX2;

var rectY2;

//Line direction

// 0 = top left -> bottom right

// 1 = top right -> bottom left

// 2 = bottom left -> top right

// 3 = bottom right -> top left

var lineDirection = null;

//Find the direction

if (x1 < x2 && y1 < y2) {

    lineDirection = 0;

    rectX1 = x1;

    rectY1 = y1;

    rectX2 = x2;

    rectY2 = y2;

}

if (x2 < x1 && y1 < y2) {

    lineDirection = 1;

    rectX1 = x2;

    rectY1 = y1;

    rectX2 = x1;

    rectY2 = y2;

}

if (x1 < x2 && y2 < y1) {

    lineDirection = 2;

    rectX1 = x1;

    rectY1 = y2;

    rectX2 = x2;

    rectY2 = y1;

}

if (x2 < x1 && y2 < y1) {

    lineDirection = 3;

    rectX1 = x2;

    rectY1 = y2;

    rectX2 = x1;

    rectY2 = y1;

}

//Create a div with the 2 points

var div = document.createElement("div");

div.id = name;

div.style.position = "absolute";

div.style.zIndex = 5;

div.style.left = rectX1 + "px";

div.style.top = rectY1 + "px";

div.style.right = (window.innerWidth - rectX2) + "px";

div.style.bottom = (window.innerHeight - rectY2) + "px";

div.style.backgroundColor = color;

//Add the div to the body

document.body.appendChild(div);

}

这有点多，但现在我想创建对角线。

是的，我知道我需要一些公式来计算线的度数和长度，但现在我只想知道如何仅用 js 创建对角线。

Answer 1

您可以使用背景层和仅一行 JS 代码轻松完成此操作，您可以在其中注入所需的变量：div.style.backgroundImage="linear-gradient(to top right,transparent calc(50% - 2px),blue,transparent calc(50% + 2px))";完整代码：function createLine(name, x1, y1, x2, y2, color) {&nbsp; var rectX1;&nbsp; var rectY1;&nbsp; var rectX2;&nbsp; var rectY2;&nbsp; //Line direction&nbsp; // 0 = top left -> bottom right&nbsp; // 1 = top right -> bottom left&nbsp; // 2 = bottom left -> top right&nbsp; // 3 = bottom right -> top left&nbsp; var lineDirection = null;&nbsp; //Find the direction&nbsp; if (x1 < x2 && y1 < y2) {&nbsp; &nbsp; lineDirection = 0;&nbsp; &nbsp; rectX1 = x1;&nbsp; &nbsp; rectY1 = y1;&nbsp; &nbsp; rectX2 = x2;&nbsp; &nbsp; rectY2 = y2;&nbsp; }&nbsp; if (x2 < x1 && y1 < y2) {&nbsp; &nbsp; lineDirection = 1;&nbsp; &nbsp; rectX1 = x2;&nbsp; &nbsp; rectY1 = y1;&nbsp; &nbsp; rectX2 = x1;&nbsp; &nbsp; rectY2 = y2;&nbsp; }&nbsp; if (x1 < x2 && y2 < y1) {&nbsp; &nbsp; lineDirection = 2;&nbsp; &nbsp; rectX1 = x1;&nbsp; &nbsp; rectY1 = y2;&nbsp; &nbsp; rectX2 = x2;&nbsp; &nbsp; rectY2 = y1;&nbsp; }&nbsp; if (x2 < x1 && y2 < y1) {&nbsp; &nbsp; lineDirection = 3;&nbsp; &nbsp; rectX1 = x2;&nbsp; &nbsp; rectY1 = y2;&nbsp; &nbsp; rectX2 = x1;&nbsp; &nbsp; rectY2 = y1;&nbsp; }&nbsp; //Create a div with the 2 points&nbsp; var div = document.createElement("div");&nbsp; div.id = name;&nbsp; div.style.position = "absolute";&nbsp; div.style.zIndex = 5;&nbsp; div.style.left = rectX1 + "px";&nbsp; div.style.top = rectY1 + "px";&nbsp; div.style.right = (window.innerWidth - rectX2) + "px";&nbsp; div.style.bottom = (window.innerHeight - rectY2) + "px";&nbsp; div.style.backgroundImage="linear-gradient(to top right,transparent calc(50% - 2px),blue,transparent calc(50% + 2px))";&nbsp; div.style.backgroundColor = color;&nbsp; //Add the div to the body&nbsp; document.body.appendChild(div);}createLine("aa", 5, 5, 200, 100, "red")