应用 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 leftvar lineDirection = null;//Find the directionif (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 pointsvar 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 bodydocument.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) {

  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.backgroundImage="linear-gradient(to top right,transparent calc(50% - 2px),blue,transparent calc(50% + 2px))";

  div.style.backgroundColor = color;

  //Add the div to the body

  document.body.appendChild(div);

}

createLine("aa", 5, 5, 200, 100, "red")