应用 css :after with javascript (no 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) {
  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")