以编程方式更改按钮颜色

Question

以编程方式更改按钮颜色

42

有没有办法以编程方式更改按钮的颜色或至少更改按钮标签的颜色？我可以使用

document.getElementById("button").object.textElement.innerText = "newlabel";

但是如何改变颜色？

- Zsolt

8

我给这个投票点赞，因为我没有看到任何投票反对的理由。 - Jimmeh

7个回答

7

这是一个使用HTML的例子：

<input type="button" value="click me" onclick="this.style.color='#000000';
this.style.backgroundColor = '#ffffff'" />

以下是使用JavaScript的示例：

document.getElementById("button").bgcolor="#Insert Color Here";

- Nathan Campos

抱歉，我把我的回复放在了所有帖子的前两个帖子之上，昨天太晚了:-( 所以再重复一遍，没有任何一个提案有效，尽管最后一个我不理解，所以我没有尝试过。感谢进一步的提示。 - Zsolt

6

最好更改className：

document.getElementById("button").className = 'button_color';

然后您可以在CSS中添加按钮样式，您可以设置背景颜色和其他任何样式。

- matpol

谢谢Nathan/DOK，这些都不起作用。简单地说，什么也没有发生。奇怪的是，在CSS中根本没有定义按钮的颜色。如果我像color: #00cccc;这样定义它，那么它会（静态地）改变标签文本的颜色... 我想Dashcode可能有点特殊，因为它是苹果风格的Javascript... 还有其他的想法吗？谢谢 Zsolt - Zsolt

你在 CSS 中设置了这个类吗？ - matpol

#my_button { font-family: HelveticaNeue-Bold; font-size: 12px; text-align: center; width: 60px; cursor: default; -khtml-user-select: none; position: absolute; right: auto; margin-top: 0px; top: 185px; bottom: 175px; height: auto; left: 109px; color: rgb(0, 204, 204); }抱歉，不知道如何进行代码高亮... 默认情况下颜色输入框是不存在的，我手动添加了它，这样改变了文本的颜色。我将其添加为 #cc0000，但 Daschode 将其转换为 rgb()。 - Zsolt

问题在于，如果我检查document.getElementById("my_button").object.textElement.color的值，它会捕获新设置的值，但这对按钮本身的视觉外观没有影响，所以它可能不是.color或object.textElement.color。 - Zsolt

你需要在 document.getElementById("my_button") 上更改类名。我觉得不需要 object.textElement 部分。 - matpol

显示剩余4条评论

1

尝试这段代码你可能需要类似这样的东西

<button class="normal" id="myButton" 
        value="Hover" onmouseover="mouseOver()" 
        onmouseout="mouseOut()">Some text</button>

然后在你的.js文件中输入此代码。确保你的HTML与你的.js文件连接。

var tag=document.getElementById("myButton");

function mouseOver() {
    tag.style.background="yellow";
};
function mouseOut() {
    tag.style.background="white";
};

- user9919032

1

如果你将它分配到一个类中，它应该能够正常工作：

<script>
  function changeClass(){
    document.getElementById('myButton').className = 'formatForButton';
  }
</script>

<style>
  .formatForButton {
    background-color:pink;
   }
</style>

<body>
  <input id='myButton' type=button class=none value='Change Color to pink' onclick='changeClass()'>
</body>

- Jonathan Fascetti

-1，对于编程来说是不可能的！好吧，你/可以/创建一个具有覆盖“粉色”的新样式元素，但我怀疑你甚至没有想到这一点。 - Pete Lomax

1

use jquery :  $("#id").css("background","red");

- Praveen Kumar K R

0

我相信你想要的是bgcolor。类似这样：

document.getElementById("button").bgcolor="#ffffff";

这里有几个演示可能会有所帮助：

背景颜色

背景颜色更改器

- DOK

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maurizio Pozzobon · Accepted Answer

我终于找到了一个可行的代码 - 试试这个：

document.getElementById("button").style.background='#000000';