背景颜色不会永久变化

时间:2015-06-04 20:31:10

标签: javascript html css

我点击按钮时尝试更改背景颜色。但是,单击该按钮时,它会改变颜色一秒钟,然后返回到页面开头设置的原始颜色。

如何永久设置颜色?

使用Javascript:

function setbackground(color)
{
  document.body.style.backgroundColor = color;
}

HTML:

<input id="bigbutton" type="submit" value=""
  style="background: url(moods/rocking.png) no-repeat center" 
  onclick="setbackground('#B84DB8')"/>

1 个答案:

答案 0 :(得分:3)

更改DOM会更改当前页面。

单击提交按钮将提交其所在的表单。

提交表单将从服务器加载一个新的(尽管可能相同)页面(它不会保留本地DOM更改)。

因此,您正在更改当前页面,然后立即将其丢弃并加载一个干净的页面。

根据您想要达到的目标,您可以:

  • 使用JavaScript阻止提交表单(如果您使用onclick属性,则通常的方式是return false,但我们更喜欢addEventListeneronclick属性这些日子)​​。如果您打算无条件地执行此操作,您可能会首先询问为什么使用提交按钮(而不是常规按钮)(尽管progressive enhancement很酷)。
  • 使用提交按钮的名称/值使服务器生成不同的HTML文档(使用您想要的颜色)而不是使用JS
  • 在本地存储有关颜色更改的数据(例如,在cookie或localStorage中),并在文档加载并重复更改时让JS读取该数据。

来自评论:

  

叶氏。我需要提交一份表格然后更改bg颜色

然后第一个选项不能使用(除非你也使Ajax的问题​​复杂化)。

使用服务器端代码进行更改将是最不具侵入性的方法。