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. Why can't you use the css solution you've already found? — Ruzihm
– Ruzihm, Commented Oct 24, 2019 at 22:19
was thinking the same as @Ruzihm, the title and desire in your question don't exactly make sense.. — Brett Caswell
– Brett Caswell, Commented Oct 24, 2019 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
– Brett Caswell, Commented Oct 24, 2019 at 22:31
Take a look at why this is a different using JS vs CSS here: 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
– Garrett Motzner, Commented Oct 24, 2019 at 22:58

Temani Afif · Accepted Answer · 2019-10-24 22:26:50Z

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, 2019 at 22:26

answered Oct 24, 2019 at 22:21

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Brett Caswell Over a year ago

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 Over a year ago

well.. perhaps my question is outside the scope of your answer and suggestion.

Temani Afif Over a year ago

@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.

Brett Caswell Over a year ago

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.

Temani Afif Over a year ago

@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.

|

Collectives™ on Stack Overflow

Apply css :after with javascript (no jquery)

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related