Javascript 做一个按钮怎么样更好？

我想在我的页面上添加一个“花式”按钮。我认为有两种可能性：

• 以图片为背景的

  元素，并向单击事件添加javascript函数

或

• 一个

  img

  元素，并向click事件添加一个javascript函数

你的意见是什么？哪种方法更好？为什么

---

谢谢大家!

只要有可能，UI元素都应该定义为CSS背景。它们不是网站内容的一部分，所以它们实际上不需要被搜索引擎索引

---

从语义上讲，

A

-标记意味着链接，因此事件应该连接到

A

-标记，而不是图像。

其他选项包括：

• 一个链接，其样式类似于使用背景图像的按钮
• 一种按钮元素，其样式为背景图像，没有边框
• 一个输入元素，类型为submit或button，样式为背景图像，没有边框

我发现按钮元素工作得最好，特别是如果你想要滚动悬停效果的话

---

jQueryUI有一个按钮插件，它可以将几乎所有类型的交互元素样式化为一个奇特的按钮。

这取决于您要做什么

在我的项目中，我们希望使用按钮而不是javascript提交一个表单，因此我们插入了一个按钮元素

<button type="submit">Sign Out</button>

注销

然后可以使用CSS设置按钮的样式

---

除此之外，我们使用图像作为非表单按钮，使用javascript作为按钮背后的功能。

不确定“花式”按钮是什么意思，但首先看看你能用CSS做些什么，例如或

---

如果你想要比这更有趣的东西，你应该在HTML中定义一个链接，带有和锚定标记，因为这在语义上是正确的，并且用CSS将它的背景设置为图像。我看不出有任何理由在click事件中使用Javascript，只要您只是想向其他页面发出GET请求

第一个。你有更多的选择来设计它，而且更容易“主题化”它。想象一个“黑暗主题”和一个“光明主题”，使用CSS你可以很容易地保持相同的HTML，但你的按钮有完全不同的样式和图像。在某些浏览器中，图像是不必要的；您可以使用纯CSS轻松创建按钮。

从语义上讲，

和

元素是页面中交互元素的正确选择

如果您只是将链接的样式设置为按钮，那么继续使用

，如果您使用正确的属性，它将保持语义

以下内容在语义上相同，但
需要JS支持：

我敢肯定，你可以用简单的CSS获得这种效果，除非你想调用某种函数，否则不需要JS，而要想快速启动按钮，就不需要JS函数

您可以简单地使用CSS动作（不确定它们是否以这种方式命名），如活动、悬停、聚焦等

以下是一个例子：


首先它的背景是红色，单击时变为蓝色，访问时变为紫色。这是可能的，因为我使用了具有这些属性的“a”标记

我只改变了背景颜色，但你也可以改变许多其他元素，如字体、背景图像、边距、边框，你可以随意选择

我认为使用纯CSS比较干净，因为JS比较混乱。如果您想在以后添加更多脚本，那么当浏览器有太多脚本要做时，肯定会发生一些不好的事情。此外，解析CSS实际上可能比JS更快

如果您使用纯CSS，还有一个提示：并非所有浏览器都以同样的方式处理CSS，我强烈建议在样式表中添加一个“reset.CSS”，以便在您使用的每个浏览器中都能以同样的方式进行处理

希望有帮助
 .按钮内的a标签的用途是什么？这似乎是多余的，而且可能适得其反（链接可能试图导致get，取消按钮）。更好吗？我们的HTML验证器从未抱怨过它，但无论如何我都会将它从我们的页面中删除。无论是谁添加它，都只是将其用于造型。我也会更新我们的CSS。感谢您指出这一点。@eamason9629，更好的是，您的更改是在跟踪更改之前完成的，因此我将进行一个空更改，以便删除否决票。
<!-- the image is of some fanciful text -->
<img src="some/image.jpg" alt="Continue" role="button" tabindex="0" />
<input type="image" src="some/image.jpg" alt="Continue" />

<span role="button" tabindex="0" class="button continue-button">Continue</span>