使用按鈕為使用JavaScript創建的每個跨度添加類

在使用 JavaScript 創建了一個行內元素后，我通過向它添加了一個新類來旋轉它，但我正在嘗試將這種旋轉效果添加到使用 JavaScript 創建的所有跨度中，目前它只為 1 執行此操作。

function myFunction() {
  var x = document.createElement("SPAN");
  var t = document.createTextNode("This is a span element.");
  x.appendChild(t);
  document.body.appendChild(x);
  x.setAttribute("id", "firstPracPara");
  x.style.display = "block";
}

function myFunction2() {
  var element = document.getElementById("firstPracPara");
  element.classList.add("rotate");
}

span {
  display: block;
}

.firstPracPara {
  transform: rotate(10deg);
}

.rotate {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 4000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 4000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<p>Click the button to create a SPAN element.</p>

<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>

我以前從未使用過 forEach，但我覺得這是這樣做的方法。

x.forEach(function (e) {
    element.classList.add("rotate");
}); 

uj5u.com熱心網友回復：

嘗試像這樣使用。

function myFunction() {
  var x = document.createElement("span");
  var t = document.createTextNode("This is a span element.");
  x.appendChild(t);
  document.body.appendChild(x);
  x.style.display = "block";
}

function myFunction2() {
let newSpan = document.querySelectorAll('span');
newSpan.forEach((e) => e.classList.add("rotate"));

}

span { 
display: block;
}
.firstPracPara{
transform: rotate(10deg);
}
.rotate{
 -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

<p>Click the button to create a SPAN element.</p>

<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>

uj5u.com熱心網友回復：

querySelectorAll明智地使用。您可以忽略已經旋轉的跨度。

請參閱下面的片段：

function myFunction() {
  var x = document.createElement("SPAN");
  var t = document.createTextNode("This is a span element.");
  x.appendChild(t);
  document.body.appendChild(x);
  x.setAttribute("class", "firstPracPara");
  x.style.display = "block";
}

function myFunction2() {
  var elements = document.querySelectorAll(".firstPracPara:not(.rotate)");
  elements.forEach(_element=>{
    _element.classList.add("rotate");
  });
}

span {
  display: block;
}

#firstPracPara {
  transform: rotate(10deg);
}

.rotate {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 4000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 4000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<p>Click the button to create a SPAN element.</p>

<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>

uj5u.com熱心網友回復：

你不能使用transformon span。有關更多說明，請參閱此鏈接。 如何在跨度上使用 CSS3 變換？

至于你的另一個問題：

main.js

const elements= document.querySelectorAll('.className');

elements.forEach(elemen => element.classList.add('new class name');

uj5u.com熱心網友回復：

您可以在 QuerySelector 中獲取所有跨度，然后像這樣為每個跨度應用您的類：

function myFunction2() {
  spans = document.querySelectorAll('span')
  spans.forEach(span => span.classList.add("rotate"))
}

uj5u.com熱心網友回復：

您使用getElementById檢索要更改的元素，但此函式最多只回傳一個元素。

id 全域屬性定義了一個識別符號 (ID)，該識別符號在整個檔案中必須是唯一的。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

您可以改用一個類：

x.classList.add("item");

然后：

const elements = document.getElementsByClassName("item");
for (let i = 0; i < elements.length; i  ) {
  elements[i].classList.add("rotate");
}

或者，如果您想使用forEach，請將 轉換HTMLCollection為Arraywith Array.from：

const elements = document.getElementsByClassName("item");
Array.from(elements).forEach(element => {
  element.classList.add("rotate");
});

uj5u.com熱心網友回復：

id應該是 uniq，這就是 document.getElementById 只回傳一個元素的原因。

在這種情況下，您應該嘗試

x.setAttribute("class", "firstPracPara");

現在您可以使用以下代碼輕松添加新類

document.querySelectorAll('.className').forEach((elem) {
   elem.classList.add("rotate");
});

標籤：javascript html css

上一篇：如何根據另一個欄位的值設定輸入欄位值？

下一篇：導航欄在頁面加載時保持打開狀態，不應