Если я использую «getElementById» для изменения стиля CSS одного объекта, как мне изменить все элементы, которые наследуют стиль?

Question

Все примеры, которые я видел, используют "getElementById", чтобы получить единственный элемент, а затем изменить этот стиль для этого единственного элемента.

Я нахожусь в ситуации, когда мне нужно изменить все соответствующие элементы на странице со стилем. Мне нужно изменить размер шрифта, высоту и ширину. Как мне это сделать, и является ли jQuery обязательным или необязательным? Причина, по которой я спрашиваю, состоит в том, что этот сайт не использует jQuery, и я бы предпочел не загружать всю библиотеку только для достижения этой цели.

Обновление В качестве примера, предположим, у меня есть несколько элементов на странице с этим стилем:

.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/slider/features/custom_Scrollbar/WebForm1.aspx

Затем этот слайдер пропустит число, которое я буду использовать для определения степени увеличения / уменьшения:

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

}

Как вы рекомендуете обрабатывать значение "PercentChange"? Я могу поменять стиль CSS для каждого соответствующего элемента, используя параметр переключения, но это может быть не так гладко, как могли бы быть другие варианты.

UPDATE2

Кроме того, если кто-то хочет взглянуть на мой код, здесь приведен автономный пример: http://www.perfmon.com/download/StackOverflow_ContactsGrid.zip

Если вы загружаете элементы управления ComponentArt, не стесняйтесь комментировать код полосы прокрутки.

Моя цель - напрямую эмулировать функцию масштабирования, доступную в Outlook 2007

Answer 1

Если вы пользуетесь Google getelementbyclassname, это может вам помочь. Идея похожа на getelementbyid, но получает их по имени класса, вы можете изменять их стили, как вам удобно

Answer 2

Допустим, у вас есть такой HTML-код ...

<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.

Разница между ними в том, что атрибут id должен быть уникальным; поскольку нам нужно, чтобы несколько элементов были определены как масштабируемые, вместо этого мы будем использовать атрибут class. Мы будем использовать соответствующее самоочевидное значение, например 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, но мы можем назначить этот элемент нескольким классам в соответствии с рекомендацией w3c :

Этот атрибут назначает элементу имя класса или набор имен классов. Любому числу элементов может быть присвоено одно и то же имя класса или имена. Несколько имен классов должны быть разделены пробелами.

Итак, мы разобрались с разметкой. Теперь о JavaScript.

Как только мы это сделаем, вы можете использовать функцию document.getElementsByClassName(...), чтобы получить ссылки на все эти zoomable элементы:

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, поэтому вам придется использовать Обнаружение объектов , чтобы определить, нужно ли вам определять его:

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";
            }
        }
    }
}

Это не полностью решит вашу проблему, но оно должно указать вам правильный путь.

Answer 3

Я бы порекомендовал создать класс, который вам нужен, в вашем CSS-файле и изменить его с помощью jQuery.

.class1{background-color:#ff0000;}
.class2{background-color:#0000ff;}

А в jQuery:

$("#element").click(function(){
    $(".class1").removeClass("class1").addClass("class2");
});

Таким образом, выне нужно делать ничего «странного» и сложного, чтобы получить нужный вам результат.