使用javascript应用css:after（无jquery）

我发现这段代码在div中创建了一个对角线

我想用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创建对角线

Thx很多，

---

Jules

您可以轻松地使用背景层和一行JS代码，在其中可以插入所需的变量：

div.style.backgroundImage="linear-gradient(to top right,transparent calc(50% - 2px),blue,transparent calc(50% + 2px))";

完整代码：

函数createLinename，x1，y1，x2，y2，颜色{ var-rectX1； 直肠1型； 向量rect2； var-rectY2； //线路方向 //0=左上->右下 //1=右上->左下 //2=左下->右上 //3=右下->左上 var lineDirection=null； //找到方向 如果x1createLineaa，5，5，200，100，red你[完全]使用js是什么意思？这听起来像是一场灾难。你为什么不能使用你已经找到的css解决方案呢？你的想法和@Ruzihm一样，你问题中的标题和愿望没有什么意义。你可以用javascript完成实际的线条绘制，你不需要依赖css或页面上的元素。但是，由于您的问题似乎打算使用javascript样式，您可能正在寻找的解决方案是翻译或转换。请看一下为什么使用JS和CSS会有不同：。但关键的是，Javascript没有对伪元素的DOM访问权限，因此只有使用CSS才能对它们进行样式化。这是一种有趣的方法，但我很惊讶这是这里的第一个建议和答案。为什么要在旋转元素时使用背景图像，甚至是编程生成的背景图像呢。。也许我的问题超出了你的回答和建议的范围。@BrettCaswell如果旋转一个元素更容易，那么我会使用它，但我认为你不能创建一条线，计算角度和长度，用一行代码正确放置它。好吧。。您不是在一行代码中完成的，或者根本没有这个建议。。我认为这是你建议的一个很好的方法，但是很明显，其他的样式必须进行修改，以适应这个概念，并且它们必须考虑角度、长度等等。也就是说，添加这一行会改变div要表示的内容的性质。它本来是一条线，您正在将它更改为一个边界框。@BrettCaswell不，没有角度或长度可以解释，您只需要设置我在代码中使用的2px的颜色和厚度。更改div的维度，该行将跟随，因此它只是一行代码，您最多只需要注入2个变量。