JavaScript的 - 允許一個變量來改變背景顏色

-2

，如果有，我可以JavaScript的 - 允許一個變量來改變背景顏色

document.body.style.backgroundColor = a variable <一種方法，我想知道---類似的東西

這樣，當變量改變它會背景色設置爲一組由變量

它必須是JavaScript的設置顏色，所以HTML降到最低

來源

2016-03-05 Simon Harrop

僅供參考，也許你不是母語的人，但「HTML降到最低」遇到相當粗魯的書面形式。 –

不，你不能。當變量發生變化時不會引發任何事件，因此當您更改變量時，您將也必須重新運行您的代碼設置backgroundColor。

你可以在ES5 +對象屬性做到這一點（所有現代瀏覽器;不IE8）：

var o = {}; 
Object.defineProperty(o, "bg", { 
    set: function(value) { 
     document.body.style.backgroundColor = value; 
    }, 
    get: function() { 
     return document.body.style.backgroundColor; 
    } 
});

現在，

o.bg = "green";

改變背景顏色爲綠色。

活生生的例子：

var o = {}; 
 
Object.defineProperty(o, "bg", { 
 
    set: function(value) { 
 
    document.body.style.backgroundColor = value; 
 
    }, 
 
    get: function() { 
 
    return document.body.style.backgroundColor; 
 
    } 
 
}); 
 

 
var colors = ["green", "blue", "yellow"]; 
 
var index = 0; 
 
var stopAt = Date.now() + 6000; 
 
tick(); 
 
function tick() { 
 
    console.log("Setting " + colors[index]); 
 
    o.bg = colors[index]; 
 
    index = (index + 1) % colors.length; 
 
    if (Date.now() < stopAt) { 
 
    setTimeout(tick, 1000); 
 
    } 
 
}

<p>Testing 1 2 3</p>

來源

2016-03-05 08:56:35

var bg= "red" 
document.body.style.backgroundColor = bg;

你可以改變文本框的幫助值，並指定該值BG變量

來源

2016-03-05 09:05:44

你可以有顏色選擇列表中的值或可通過輸入框給出。並且，您可以綁定'onChnage'事件並將該值存入變量並將該變量分配給背景顏色屬性。

感謝

來源

2016-03-05 09:10:03

最簡單的代碼來改變背景顏色：

<body> 
    <script type="text/javascript"> 
    function ZishanAdThandarGreen() 
    { 
    document.getElementById("results_container_Zishan").innerHTML = 'Green'; 
    document.getElementById("color").innerHTML = '<!-- body, html {font-family:Tahoma, Times, Times;width:100%;margin:0;padding:0;text-align:center;background:green;} -->'; 
    } 
    function ZishanAdThandarBlue() 
    { 
    document.getElementById("results_container_Zishan").innerHTML = 'Blue'; 
    document.getElementById("color").innerHTML = '<!-- body, html {font-family:Tahoma, Times, Times;width:100%;margin:0;padding:0;text-align:center;background:Blue;} -->'; 
    } 
    function ZishanAdThandarGrey() 
    { 
    document.getElementById("results_container_Zishan").innerHTML = 'grey'; 
    document.getElementById("color").innerHTML = '<!-- body, html {font-family:Tahoma, Times, Times;width:100%;margin:0;padding:0;text-align:center;background:Grey;} -->'; 
    } 
    </script> 

    <style type="text/css" id="color"> 
    <!-- 
    body, html {font-family:Tahoma, Times, Times;width:100%;margin:0;padding:0;text-align:center;background:red;} 
    --> 
    </style> 

     <h2>Background Color script by ZishanAdThandar</h2><br> 
      Current Color:<div id="results_container_Zishan">Red</div> 
      <button id="download-json" class="btn" style="align:right;"onclick="return ZishanAdThandarGreen()">Green</button> 
      <button id="download-json" class="btn" style="align:right;"onclick="return ZishanAdThandarBlue()">Blue</button> 
      <button id="download-json" class="btn" style="align:right;"onclick="return ZishanAdThandarGrey()">Grey</button> 
     <br> 
    </body>

來源

2016-03-06 04:04:10

JavaScript的 - 允許一個變量來改變背景顏色

回答

相關問題