使用Javascript的jumbotron顏色處理

我有一個問題與javascript.I想要控制jumbotron的顏色，並將其設置爲每3秒隨機one.The問題在於，我不知道如何操作JavaScript與JavaScript，因爲我對JavaScript很新穎。我看到一些其他的解決方案和一些其他的線程，但它不起作用（我不知道我是否做錯了什麼）。我現在沒有寫js代碼，因爲我刪除了一切無法使用的東西。使用Javascript的jumbotron顏色處理

.jumbotron { 
    background-color: #f14444 !important; 
} 
/*Without the !important rule it won't change color!*/

如果你有，你認爲我沒有檢查我會很樂意進行檢查，但即時通訊有足夠的信心說，我見過他們已經任何線程。
無論如何感謝您的時間！

來源

2017-04-21 Alex Pyrg

有很多對這裏良好的信息：https：//開頭www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript – AdjunctProfessorFalcon

[小提琴，如何使用CSS va一次改變整個文檔中多個節點的顏色，而不是連接節點的顏色rs]（https://jsfiddle.net/xg7vzpfy/） – Thomas

要更改背景顏色，只需選擇元素和設置屬性：

setTimeout(() => { 
 
    document.querySelector('.jumbotron').style.backgroundColor = '#f14444'; 
 
}, 1000);

.jumbotron { 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: black; 
 
}

<div class="jumbotron"></div>

注意，上面會選擇給定類的第一個找到的元素，因此，如果您需要針對特定元素，請考慮給它一個id並將其選爲@Phil在上面顯示。

來源

2017-04-21 16:07:13 baao

非常感謝！ –

你是weocome！ @AlexPyrg – baao

DOM中的HTML元素具有style屬性。

document.getElementById('something').style.backgroundColor = '#ccc'

注意，像CSS background-color複姓性能通常是駝峯（的backgroundColor）在Javascript。

來源

2017-04-21 16:07:50

你也可以用keyframe animation

這裏實現它是一個tutorial如何獲得隨機顏色

@-webkit-keyframes changeColors { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    50% { 
 
    background-color: blue; 
 
    } 
 
    100% { 
 
    background-color: green; 
 
    } 
 
} 
 

 
@-moz-keyframes changeColors { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    50% { 
 
    background-color: blue; 
 
    } 
 
    100% { 
 
    background-color: green; 
 
    } 
 
} 
 

 
@-ms-keyframes changeColors { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    50% { 
 
    background-color: blue; 
 
    } 
 
    100% { 
 
    background-color: green; 
 
    } 
 
} 
 

 
.jumbotron { 
 
    -webkit-animation: changeColors 3s infinite; 
 
    -moz-animation: changeColors 3s infinite; 
 
    -ms-animation: changeColors 3s infinite; 
 
    background-color: #f14444; 
 
}

<div class="jumbotron"> 
 
    Some text here 
 
</div>

來源

2017-04-21 16:19:40

使用Javascript的jumbotron顏色處理

回答

相關問題