为使用JavaScript创建的每个span添加using button类

Question

我已经得到了一个内联元素旋转后，它已经使用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");
}); 

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

Answer 2

明智地使用querySelectorAll。你可以忽略已经旋转的span

参见下面的代码片段:

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>

Answer 3

不能在span上使用transform。更多解释请看这个链接。我如何在span上使用CSS3转换?

至于你的另一个问题:

main.js

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

Answer 4

您可以在QuerySelector中获得所有的span，然后像这样为每个span应用您的类:

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

Answer 5

您使用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，用Array.from:

将HTMLCollection转换为Array

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

Answer 6

id应该是唯一的，这就是为什么文档。getElementById只返回一个元素。

在这种情况下，你应该尝试

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

现在您可以使用下面的代码轻松地添加新类

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