第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

應(yīng)用 css :after with javascript (沒有 jquery)

應(yīng)用 css :after with javascript (沒有 jquery)

白板的微信 2021-12-02 19:17:40
我發(fā)現(xiàn)這段代碼可以在 div 中創(chuàng)建對角線。https://jsbin.com/tefakagohi/edit?html,css,output我正在嘗試在 JS 中制作一個線條生成器。但是我想使用js完全創(chuàng)建這個對象......從 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);}這有點多,但現(xiàn)在我想創(chuàng)建對角線。是的,我知道我需要一些公式來計算線的度數(shù)和長度,但現(xiàn)在我只想知道如何僅用 js 創(chuàng)建對角線。
查看完整描述

1 回答

?
白豬掌柜的

TA貢獻1893條經(jīng)驗 獲得超10個贊

您可以使用背景層和僅一行 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")



查看完整回答
反對 回復(fù) 2021-12-02
  • 1 回答
  • 0 關(guān)注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號