Apply css :after with javascript (no jquery)

Question

i found this piece of code to create a diagonal in a div.

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

Im trying to make a line generator in JS. however i would like to create this object complety using js...

Starting with the document.createElement() etc...

I have some code here:

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);
}

This does a bit more but now i would like to create the diagonal.

And yes I know that i need some formulas to calculate the degree and the length of the line but for now I would just like to know how i can create the diagonal with only js.

Thx a lot, Jules

What do you mean by "[completely] using js"? This sounds like it could be an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). Why can't you use the css solution you've already found? — Ruzihm, Oct 24 '19 at 22:19
https://stackoverflow.com/questions/29260296/modify-pseudo-select-after-in-javascript — epascarello, Oct 24 '19 at 22:21
was thinking the same as @Ruzihm, the title and desire in your question don't exactly make sense.. — Brett Caswell, Oct 24 '19 at 22:24
you can accomplish actual line drawings with javascript, you don't need to rely on css or elements on the page. But since your question seemingly intends to use javascript styling - the solution you're probably looking for is translate or transform.. — Brett Caswell, Oct 24 '19 at 22:31
Take a look at why this is a different using JS vs CSS here: https://stackoverflow.com/a/29263753/8031815 . Critically though, Javascript doesn't have DOM access to pseudo elements, so styling them is something that can only be done with CSS. — Garrett Motzner, Oct 24 '19 at 22:58

Temani Afif · Accepted Answer · 2019-10-24T22:26:50.303

1

You can easily to do it with a background layer and only one line of JS code where you can inject the variable you want:

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

Full code:

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")

edited Oct 24 '19 at 22:26

answered Oct 24 '19 at 22:21

Temani Afif

245,468
26
309
415

an interesting approach, but I'm surprised it was the first suggestion and answer here. Why would one use a background image (even a programmatically generated one) over rotating the element? – Brett Caswell Oct 24 '19 at 22:37
well.. perhaps my question is outside the scope of your answer and suggestion. – Brett Caswell Oct 24 '19 at 22:38
@BrettCaswell if rotating an element is more easier then I would use it but I dont think you can create a line, calculate the angle, the length, place it correctly using one line of code. – Temani Afif Oct 24 '19 at 22:39
well.. you aren't doing it in one line of code, or at all with this suggestion.. I think it's a good approach you're suggesting, but clearly the rest of the styles would have to be modified\change to suit this concept, and they would have to account for the angle, length, and such. That is, you adding this line changes the nature of what the div was to represent. It was intended to be the line, you're changing it to a bounding-box. – Brett Caswell Oct 24 '19 at 22:58
@BrettCaswell no there is no angle or length to account for, you only need to set the color and the thickness (the 2px I am using in my code). Change the dimension of the div and the line will follow so it's just one line of code where you only need to inject 2 variables at max. – Temani Afif Oct 24 '19 at 23:05
Thanks a lot, this worked great!. I will add an upadte line function and then put it on github. Here is the test project page: http://jnjproductions.com/jsLine/ – Jules Hummelink Oct 25 '19 at 10:45

Apply css :after with javascript (no jquery)

1 Answers1