回答:
JavaScriptプロパティを変更しますdocument.body.style.background。
例えば：
function changeBackground(color) {
document.body.style.background = color;
}
window.addEventListener("load",function() { changeBackground('red') });
注：これは、ページがどのように組み立てられるかに少し依存します。たとえば、異なる背景色でDIVコンテナーを使用している場合、ドキュメントの本文ではなく、その背景色を変更する必要があります。
私は以前のポスターに同意しclassNameます。色を変えることはよりきれいなアプローチです。しかし、私の主張は、a classNameは「背景をこの色またはその色にしたい理由」の定義と見なすことができるということです。
たとえば、赤にすることは、赤にしたいだけでなく、ユーザーにエラーを通知したいからです。そのためAnErrorHasOccured、本文にclassName を設定することは、私が好む実装です。
CSSで
body.AnErrorHasOccured
{
background: #f00;
}
JavaScriptの場合：
document.body.className = "AnErrorHasOccured";これにより、これに従ってより多くの要素にスタイルを設定するオプションが残りますclassName。そのclassNameため、ページを特定の状態に設定することができます。
あなたは次の方法でそれを行うことができます ステップ1
var imageUrl= "URL OF THE IMAGE HERE";
var BackgroundColor="RED"; // what ever color you want
BODYの背景を変える
document.body.style.backgroundImage=imageUrl //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color
IDの要素を変更するには
document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor
同じクラスの要素
var elements = document.getElementsByClassName("ClassName")
for (var i = 0; i < elements.length; i++) {
elements[i].style.background=imageUrl;
}
CSSアプローチ：
連続的な色を見たい場合は、次のコードを使用してください。
body{
background-color:black;
animation: image 10s infinite alternate;
animation:image 10s infinite alternate;
animation:image 10s infinite alternate;
}
@keyframes image{
0%{
background-color:blue;
}
25%/{
background-color:red;
}
50%{
background-color:green;
}
75%{
background-color:pink;
}
100%{
background-color:yellow;
}
}
速くまたは遅く見たい場合は、10秒から5秒に変更します。
次のコマンドを使用するだけで、ページの背景を変更できます。
document.body.style.background = #000000; //I used black as color codeただし、以下のスクリプトは、3秒ごとにsetTimeout（）関数を使用してページの背景を変更します。
$(function() {
var colors = ["#0099cc","#c0c0c0","#587b2e","#990000","#000000","#1C8200","#987baa","#981890","#AA8971","#1987FC","#99081E"];
setInterval(function() {
var bodybgarrayno = Math.floor(Math.random() * colors.length);
var selectedcolor = colors[bodybgarrayno];
$("body").css("background",selectedcolor);
}, 3000);
})
これにより、ドロップダウンメニューから選択したユーザーの選択に従って背景色が変更されます。
function changeBG() {
var selectedBGColor = document.getElementById("bgchoice").value;
document.body.style.backgroundColor = selectedBGColor;
}<select id="bgchoice" onchange="changeBG()">
<option></option>
<option value="red">Red</option>
<option value="ivory">Ivory</option>
<option value="pink">Pink</option>
</select>このスクリプト要素をbody要素に追加し、必要に応じて色を変更します。
<body>
<p>Hello, World!</p>
<script type="text/javascript">
document.body.style.backgroundColor = "#ff0000"; // red
</script>
</body><!DOCTYPE html>
<html>
<body>
<select name="" id="select" onClick="hello();">
<option>Select</option>
<option style="background-color: #CD5C5C;">#CD5C5C</option>
<option style="background-color: #F08080;">#F08080</option>
<option style="background-color: #FA8072;">#FA8072</option>
<option style="background-color: #E9967A;">#E9967A</option>
<option style="background-color: #FFA07A;">#FFA07A</option>
</select>
<script>
function hello(){
let d = document.getElementById("select");
let text = d.options[d.selectedIndex].value;
document.body.style.backgroundColor=text;
}
</script>
</body>
</html>ただし、<body>要素が存在する前にボディカラーを設定する必要があります。そうすれば、最初から正しい色になります。
<script>
var myColor = "#AAAAAA";
document.write('\
<style>\
body{\
background-color: '+myColor+';\
}\
</style>\
');
</script>これ<head>は、ドキュメントまたはjsファイルに挿入できます。
こちらが、遊ぶのに最適な色です。
var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);次のコードをお勧めします。
<div id="example" onClick="colorize()">Click on this text to change the
background color</div>
<script type='text/javascript'>
function colorize() {
var element = document.getElementById("example");
element.style.backgroundColor='#800';
element.style.color='white';
element.style.textAlign='center';
}
</script>次のコマンドを使用するだけで、ページの背景を変更できます。
function changeBodyBg(color){
document.body.style.background = color;
}続きを読む@ 背景色の変更
または、RGB表記で背景色の値を指定したい場合は、
document.getElementById("yourid").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';ここで、a、b、cはカラー値です
例：
document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';