如果我使用"getElementById"，要更改单个对象的CSS样式，如何更改继承该样式的所有元素? [英] If I use "getElementById" to alter a CSS style of a single object, how do I alter all elements that inherit the style?

问题描述

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

All the examples I've seen use "getElementById" to get the single element, and then change that style for that singular element.

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

I'm in the situation where I need to modify all the matching elements on the page with a style. I need to change the font size, height, and width. How do I do this, and is jQuery required or optional? The reason I ask is because this site doesn't use jQuery and I'd rather not download the entire library just to accomplish this one thing.

更新 举例来说，假设页面上有几个具有这种样式的元素:

Update As an example, suppose I have several elements on the page with this style:

.outerContact
{
    border: 0px;
    margin: 7px;    
    float: left;
   padding: 0px; 
 background: url(/TLSADMIN/UserControls/contactsgrid/trans-shadow.png) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */        
}
.contactLarge{
    height: 163px;
    width: 250px;
    border: 1px solid #ccc; 
    border-top: 1px solid #ddd;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:small;
    margin: -5px 5px 5px -5px; /* Offset the image by certain pixels to reveal the shadow, as the shadows are 6 pixels wide, offset it by that amount to get a perfect shadow */

  /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */     
     background-image: url('/TLSADMIN/UserControls/contactsgrid/OutlookContactGradient.png') ;
     background-repeat:repeat-x;
      background-position: bottom;
padding: 0px; /* Increasing this gives a white border around the image */ 
background-color: #f2f6f9; /* Background color of the border created by the padding */
border: 1px solid #cecece; /* A 1 pixel greyish border is applied to the white border created by the padding */ 
display: block; /* IE won't do well without this */ 
position: relative; /* Make the shadow's position relative to its image */ 

}

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

And then assume I have a JavaScript function that will proportionally resize the elements above according to a slider bar. The slider bar I'm using is available from a 3rd party here: http://aspnetajax.componentart.com/control-specific/slider/features/custom_Scrollbar/WebForm1.aspx

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

That slider will then pass a number that I'll use to determine how much to zoom in/out:

function ResizeWindowAccordingToScrollBar(PercentChange)
{
 //Locate elements
 //Resize fonts, borders, all styles to zoom in/ zoom out.

}

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

How do you recommend I handle the "PercentChange" value? I may swap out the CSS style for each matching element using a switch statment, but that may not be as smooth as other options could be.

UPDATE2

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

Also, if someone wants to look at my code, a self contained sample is here: http://www.perfmon.com/download/StackOverflow_ContactsGrid.zip

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

If you download the ComponentArt Controls, feel free to uncomment the scrollbar code.

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

My goal is to directly emulate the zoom feature available in Outlook 2007

推荐答案

因此，假设您有一些类似HTML的内容...

So let's say you have some HTML like this...

<div>
    <h2>Example</h2>
    <p>This is an example</p>
    <p>
        Some of this content can be re-sized.
    </p>
    <img src="lenna.jpg" class="iconic" alt="a petty lady" />
</div>

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

You need some of these elements to be zoomable/re-sizable. First, you need to identify those elements using element identifiers; either the id attribute or the class attribute.

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

The difference between the two is an id attribute has to be unique; since we need several items to be identified as zoomable, we'll use a class attribute instead. We'll use an appropriate, self-evident value, like zoomable.

<div>
    <h2>Example</h2>
    <p>This is an example</p>
<div>
    <h2>Example</h2>
    <p>This is an example</p>
    <p class="zoomable">
        Some of this content can be re-sized.
    </p>
    <img src="lenna.jpg" class="zoomable iconic" alt="a petty lady" />
</div>
</div>

请注意，<img>元素已经具有class属性，但是根据

Note that the <img> element already had a class attribute, but we can assign that element to multiple classes, according the to w3c recommendation:

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

This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

因此，我们已经弄清楚了标记.现在使用JavaScript.

So we've figured out the markup. Now for the JavaScript.

完成此操作后，您可以使用document.getElementsByClassName(...)函数获取对所有这些zoomable元素的引用:

Once we've done that, you can use the document.getElementsByClassName(...) function to get references to all those zoomable elements:

var zoomables = document.getElementByClassName('zoomable');
for(var i=0; i<zoomables.length; i++) {
    zoomables[i].style.height = '100px';
    zoomables[i].style.width = '100px';
    zoomables[i].style.fontSize = '20px';
}

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

... but it's not supported in Internet Explorer, so you'll have to use Object Detection to determine if you need to define it instead:

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) { // this is the simplest, plainest, lowest-invested-time-and-effort
                                                            // version of getElementsByClassName  one can write...
        // you should probably sanitize that className input parameter a bit...
        var allElements = document.getElementsByTagName('*');
        for(var i=0; i<allElements.length; i++) {
            if(/\bclassName\b/.test(allElements[i].className)) {
                allElements[i].style.border = "2px solid red";
            }
        }
    }
}

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

This doesn't completely solve your problem, but it should set you on the right path.

这篇关于如果我使用"getElementById"，要更改单个对象的CSS样式，如何更改继承该样式的所有元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！