Question

我想知道我是否有办法

document.body.style.backgroundColor = a variable＆lt; ---类似的东西

这样当变量被更改时，它会将背景颜色设置为由变量设置的颜色

IT必须是javascript，因此请将html保持在最低限度

Answer 1

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

您可以在文本框的帮助下更改该值，并将该值分配给bg变量

Answer 2

不，你不能。更改变量时不会引发任何事件，因此当您更改变量时，还必须重新运行代码设置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>

Answer 3

您可以在选择列表中显示颜色值，也可以通过输入框提供颜色值。在那个你可以绑定＆＃39; onChnage＆＃39; event并在变量中获取该值并将该变量赋值给背景颜色属性。

由于

Answer 4

最容易更改背景颜色的代码：

<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>

JavaScript - 允许变量更改背景颜色

4 个答案: