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的 - 允许一个变量来改变背景颜色

回答

相关问题