[英]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.