Dynamicky se měnící styl prvek ve smyčce

Question 1

Snažím se, aby mé 3 prvky marginLeft liší se od sebe navzájem, s každým po jedné větší, tím 300px než předchozí. Jasně, že 'px', což je řetězec je v cestě, ale nevím, jak to překonat.

function render() {
  var gElOptions = document.querySelector('.options');

  for (var i = 0; i < 3; i++) {
    var elOptionBtn = document.createElement('button');

    gElOptions.appendChild(elOptionBtn);
    elOptionBtn.setAttribute('class', `option-${i}`);
    var elOption = document.querySelector(`.option-${i}`);
    elOption.style.marginLeft = 1000 + 'px';
    // The problematic line:
    if (elOption.style.marginLeft === 1000 + 'px') elOption.style.marginLeft -= 300 + 'px';
  }
}

<body onload="render()">
  <div class="options">

  </div>
</body>

Question 2

function render() {
    var gElOptions = document.querySelector('.options');

    for (var i = 0; i < 3; i++) {
        var elOptionBtn = document.createElement('button');
        elOptionBtn.innerHTML = i
        gElOptions.appendChild(elOptionBtn);
        elOptionBtn.setAttribute('class', `option-${i}`);
        //var elOption = document.querySelector(`.option-${i}`);
        elOptionBtn.style.marginLeft = i*300 + 'px';
        // The problematic line:
        //if (elOption.style.marginLeft === 1000 + 'px') elOption.style.marginLeft -=  300 + 'px';
    }
}

render()

<div class="options"></div>

Question 3

Js je pouze pro dynamické přidávání tlačítek. (šipka vpravo, šipka vlevo).

Rozpětí pro každé tlačítko se nachází v css.

const container = document.querySelector('div');

const addButton = () => {
  const button = document.createElement('button');
  button.textContent = "test"
  container.appendChild(button);
}

const delButton = () => {
 container.lastChild?.remove()
}

window.addEventListener("keydown", ({key}) => {
  switch(key){
    case "ArrowLeft": {
      delButton();
      break;
    }
    case "ArrowRight": {
       addButton();
    }
  }
  
})

button{
  margin-left: 5px;
}
button:nth-child(1){
  margin-left: 10px;
}
button:nth-child(2){
  margin-left: 20px;
}
button:nth-child(3){
  margin-left: 30px;
}
button:nth-child(4){
  margin-left: 40px;
}
button:nth-child(5){
  margin-left: 50px;
}
button:nth-child(6){
  margin-left: 50px;
}

<div>

Alan Omar · Answer 1 · 2021-11-20T19:17:21

function render() {
    var gElOptions = document.querySelector('.options');

    for (var i = 0; i < 3; i++) {
        var elOptionBtn = document.createElement('button');
        elOptionBtn.innerHTML = i
        gElOptions.appendChild(elOptionBtn);
        elOptionBtn.setAttribute('class', `option-${i}`);
        //var elOption = document.querySelector(`.option-${i}`);
        elOptionBtn.style.marginLeft = i*300 + 'px';
        // The problematic line:
        //if (elOption.style.marginLeft === 1000 + 'px') elOption.style.marginLeft -=  300 + 'px';
    }
}

render()

<div class="options"></div>

Ahoj Alane, zatímco to dělá, a konečně nastavit tlačítka ve stejné pozici (díky za to), to mi nedovoluje upravit je do správné polohy chci na stránce (snaží marginLeft/Vpravo je všechny na CSS zkazí výsledek vašeho kódu, a najednou jsou již vyrovnány vedle sebe ve stejné vzdálenosti, ale spíše jeden je nad jiné nerovnoměrně.
při spuštění výše uvedený kód, klikněte na Full page vidět konečný výsledek.
Na projektu mám na mysli. Jde o to, mít tlačítka v prvku gElOptions (div obsahující tlačítka). Když jsem se spustit kód - zatímco to dělá, a konečně nastavit je ve stejné vzdálenosti od sebe navzájem s marginLeft, nemám žádný způsob, jak udržet je v mezích vizuální obraz gElOptions, a 2 tlačítka escape hranice.

Robert · Answer 2 · 2021-11-20T20:34:09

Js je pouze pro dynamické přidávání tlačítek. (šipka vpravo, šipka vlevo).

Rozpětí pro každé tlačítko se nachází v css.

const container = document.querySelector('div');

const addButton = () => {
  const button = document.createElement('button');
  button.textContent = "test"
  container.appendChild(button);
}

const delButton = () => {
 container.lastChild?.remove()
}

window.addEventListener("keydown", ({key}) => {
  switch(key){
    case "ArrowLeft": {
      delButton();
      break;
    }
    case "ArrowRight": {
       addButton();
    }
  }
  
})

button{
  margin-left: 5px;
}
button:nth-child(1){
  margin-left: 10px;
}
button:nth-child(2){
  margin-left: 20px;
}
button:nth-child(3){
  margin-left: 30px;
}
button:nth-child(4){
  margin-left: 40px;
}
button:nth-child(5){
  margin-left: 50px;
}
button:nth-child(6){
  margin-left: 50px;
}

<div>

Dynamicky se měnící styl prvek ve smyčce

Otázka

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii