使用javascript设置表单（选择）样式，没有框架？答案

【问题标题】：style a form (select) using javascript, no framework?使用javascript设置表单（选择）样式，没有框架？
【发布时间】：2009-12-20 04:02:42
【问题描述】：

任何人都知道如何在没有框架的情况下使用 javascript 设置表单元素的样式？为 jquery 找到了一个不错的插件，但我在我的网站上根本不使用 jquery，所以我想尽可能避免它..

我想创建一个如下所示的选择框：

澄清一下，我想在选择框上设置一个图像/背景，以便我可以有一个自定义下拉箭头

【问题讨论】：

【解决方案1】：

您可以通过 style 属性设置元素的样式（用驼峰式大小写替换“-”），如下所示：

document.getElementById('elem').style.backgroundColor = 'red';

但最好将样式放在 CSS 中，而只在 JavaScript 中更改类：

document.getElementById('elem').className = 'roundedCornerButton';

【讨论】：

【解决方案2】：

您必须使用不同的元素。

我可以为您指出的最佳方向是http://v2.easy-designs.net/articles/replaceSelect/ - 它似乎可以很好地解释如何做好您想做的事情。

【讨论】：

【解决方案3】：

您不需要 Javascript，纯 CSS 即可。

例如查看这篇文章： Style Web Forms Using CSS

【讨论】：

【解决方案4】：

样式是通过 CSS 而不是 JS 完成的。 JQuery 用于 Javascript 中的快捷方式。

没有发生“替换”——标签仍然在场景下方，但良好的 CSS 使用使它看起来像那个图像。

【讨论】：

【解决方案5】：

有许多不需要框架的下拉菜单替换。尝试谷歌搜索javascript drop down。看一个花哨的例子here。

但考虑使用框架。在这个时代，20-50kb 已经不是那么多了，即使是拨号线路也不是那么多。框架为各种任务提供了很多小帮手，您甚至可以链接到 Google hosted versions，用户很可能已经缓存了它们。

【讨论】：

【解决方案6】：

如果表单元素关联了一个 ID，那么您可以使用类似于以下的代码：

elem = document.getElementById(elemId);
elem.style.background = 'white';

我假设您想动态更改元素样式；不同的是，你不需要 JavaScript 来获得你想要的。

【讨论】：

【解决方案7】：

如果你不想使用任何框架，那么试试这个

【讨论】：

What I'm asking though is does anyone know of a similar solution but that does not require a javascript framework like jQuery (which is 50kb hence why I dont want to use it just for 1 selectbox)
你不能在没有 javascript 的情况下修改选择框