[英]Changing the CSS of a div with classname using JavaScript
我想使用JavaScript函数更改CSS类的动画属性。 我一直在尝试各种方法,但没有一个起作用。 请找出我要去哪里。
CSS:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
}
.center .earth {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
margin: 3em auto;
border-radius: 50%;
background-size: 630px;
animation: spin 30s linear alternate infinite;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;
}
.center .earth .moon {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 200px;
height: 2px;
transform-origin: left;
border-radius: 50%;
animation: rotate 10s linear infinite;
}
.center .earth .moon::before {
content: '';
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsvjrANMGI8aBJSFbsHteVa04rcB1IjjNsbrhm8vTLflfpiG133g);
position: absolute;
background-size: 200px;
top: -25px;
right: 0;
width: 50px;
height: 50px;
border-radius: 50%;
animation: spin 10s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
background-position: 100%;
}
}
HTML:
<div className="center">
<div className="earth">
<div className="moon" />
</div>
</div>
JavaScript函数:
function change() {
var elem = document.getElementsByClassName('moon');
elem.style.animation="rotate 5s linear infinite";
}
我尝试了各种方法,但是它们都无法执行修改。 遍历对象也无济于事。
elem
是元素的HTMLCollection,而不是单个元素,并且设置HTMLCollection的style
属性无效。
相反,您需要分别更改每个元素的样式:
Array.from(document.getElementsByClassName('moon')).forEach(elem => {
elem.style.animationDuration = "5s";
});
编辑:
下面的代码片段显示了该方法有效/提供了参考:
function change_spin_rate() { Array.from(document.getElementsByClassName('spinner')).forEach(elem => { elem.style.animationDuration = "1s"; }); } document.getElementById("spin_change").onclick = change_spin_rate;
@keyframes spin { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } .spinner { display: inline-block; animation: spin 4s infinite linear; } #spin_change { padding: 8px 16px; display: inline-block; font-family: sans-serif; cursor: pointer; border-radius: 16px; } #spin_change:hover { background: rgba(0, 64, 255, 0.1); }
<a class="spinner">🌀</a><a class="spinner">🌀</a><a class="spinner">🌀</a> <a id="spin_change">Click me to change the spin rate for all spinners.<a> <a class="spinner">🌀</a><a class="spinner">🌀</a><a class="spinner">🌀</a>
尝试这个:
function change() {
let elems = document.getElementsByClassName("moon");
elems.forEach(elem => elem.style.animation = "rotate 5s linear infinite");
}
document.getElementsByClassName
返回多个元素。 您需要遍历它们并将更改应用于每个元素。
function change() {
Array.from(document.getElementsByClassName("moon")).forEach((elem) => {
elem.style.animation = "rotate 5s linear infinite";
});
}
document.getElementsByClassName
不返回数组。 您必须在上面使用Array.from
,然后才能调用Array.prototype.forEach
。
顺便说一句,除非您正在编写React JSX,否则<div className="moon" />
应该是<div class="moon" />
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.