如果我使用“ getElementById”来更改单个对象的CSS样式，如何更改所有继承该样式的元素？

Question

我见过的所有示例都使用“ getElementById”来获取单个元素，然后为该单个元素更改该样式。

我处于需要用样式修改页面上所有匹配元素的情况。我需要更改字体大小，高度和宽度。我该怎么做，jQuery是必需的还是可选的？我问的原因是因为该站点不使用jQuery，所以我不想下载整个库只是为了完成这件事。

更新 例如，假设我在页面上有几种具有这种样式的元素： 通用标签

然后假设我有一个JavaScript函数，它将根据滑条按比例调整上述元素的大小。我正在使用的滑块可从第三方这里获得： http://aspnetajax.componentart.com/control-specific/滑块/功能/custom_Scrollbar/WebForm1.aspx

然后，该滑块将传递一个数字，我将使用该数字来确定放大/缩小的程度： 通用标签

您如何建议我处理“ PercentChange”值？我可以使用switch语句为每个匹配的元素交换CSS样式，但这可能不如其他选项那么平滑。

UPDATE2

此外，如果有人想看一下我的代码，这里是一个自包含的示例： http://www.perfmon.com/download/StackOverflow_ContactsGrid.zip

如果您下载ComponentArt控件，请随时取消注释滚动条代码。

我的目标是直接模拟Outlook 2007中可用的缩放功能

Answer 1

因此，假设您有这样的HTML ... 通用标签

您需要其中一些元素可缩放/调整大小。首先，您需要使用元素标识符; id属性或class属性。

两者之间的区别是id属性必须唯一；由于我们需要将几个项目标识为可缩放，因此我们将改为使用class属性。我们将使用适当的，不言而喻的值，例如zoomable。 通用标签

请注意，<img>元素已经具有class属性，但根据 w3c建议：

此属性为一个元素分配一个类名或一组类名。可以为任何数量的元素分配相同的一个或多个类名。多个类名称必须用空格字符分隔。

因此，我们已经确定了标记。现在使用JavaScript。

完成此操作后，您可以使用document.getElementsByClassName(...)函数来获取对所有那些zoomable元素的引用： 通用标签

...，但是Internet Explorer不支持它，因此您必须使用对象检测，以确定是否需要定义它： 通用标签

这不能完全解决您的问题，但是应该使您走上正确的道路。

Answer 2

如果您使用google getelementbyclassname可能会有所帮助。与getelementbyid类似，但可以通过类名获取它们，您可以根据需要修改它们的样式。

Answer 3

我的建议是在CSS文件中创建所需的类，并使用jQuery进行更改。 通用标签

在jQuery中： 通用标签

这样，您无需做任何“怪异”而复杂的事情即可获得所需的结果。