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

Все примеры, которые я видел, используют "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 для каждого соответствующего элемента с помощью оператора switch, но это может быть не так гладко, как другие варианты.

ОБНОВЛЕНИЕ 2

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

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

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

альтернативный текст


jquery css getelementbyid dhtml
person halfbit    schedule 12.08.2010    source источник
comment
Одним из подходов может быть изменение самого класса CSS, но говорят, что это громоздко. См. stackoverflow.com/questions/ 1409225/   -  person Pekka    schedule 12.08.2010
comment
Мне нужно изменить все объекты на странице с помощью стиля. пожалуйста, дополните; Вы имеете в виду, что мне нужно изменить все объекты на странице, добавив/удалив/изменив стиль, или мне нужно изменить все объекты на странице, которые имеют определенный атрибут стиля?   -  person Richard JP Le Guen    schedule 12.08.2010
comment
Вы действительно подразумеваете под всеми объектами каждый элемент на странице?   -  person Pekka    schedule 12.08.2010
comment
@All - я просто включил более подробную информацию по запросу   -  person halfbit    schedule 12.08.2010
comment
@Pekka - Нет, я хочу только изменить объекты с помощью этих стилей. На странице есть другие объекты, которые не изменяются   -  person halfbit    schedule 12.08.2010
comment
Я удаляю свой ответ ниже, потому что я думаю, что 99% этого вопроса - это непонимание того, как работает CSS или какие конкретные свойства и правила могут достичь желаемого эффекта. Вопрос, который вы изначально задали, отличается от того, что у вас есть сейчас.   -  person Jesse Dhillon    schedule 12.08.2010
comment
@Richard JL LeGuen: мне нужно изменить размер элементов ... Я полагаю, это означает, что мне нужно изменить все объекты на странице (с атрибутом стиля) и изменить их стиль.   -  person halfbit    schedule 12.08.2010
comment
@ Джесси Диллон Прошу прощения за плохую формулировку вопроса ... Я не хочу вызывать путаницу. Как вы рекомендуете мне это сформулировать?   -  person halfbit    schedule 12.08.2010
comment
@ MakerOfThings7 - Ваш приведенный выше фрагмент кода CSS не помогает нам понять, размер каких элементов вам нужно будет изменить, а размер каких элементов изменять не нужно. Я согласен с @Jesse Dhillon; Я подозреваю, что вы немного запутались... вы пытаетесь изменить размер outerContact элементов? contactLarge элементов? другие элементы?   -  person Richard JP Le Guen    schedule 12.08.2010
comment
@All — я загрузил автономный образец кода и изображение, демонстрирующее, чего я пытаюсь достичь   -  person halfbit    schedule 12.08.2010

Ответы (3)


arrow_upward
2
arrow_downward

Итак, допустим, у вас есть такой 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";
            }
        }
    }
}

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

person Richard JP Le Guen    schedule 12.08.2010
comment
Спасибо за примеры IE и не-IE. Это очень ясно, и я узнал довольно много, благодаря вам! - person halfbit; 12.08.2010

arrow_upward
3
arrow_downward

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

person matpol    schedule 12.08.2010
comment
эта ссылка может помочь вам developer.mozilla.org/en/DOM/document.getElementsByClassName - person khairil; 12.08.2010
comment
Это не поддерживается IE, но вы можете проверить, существует ли функция, и если нет, используйте пользовательскую, которая просто проходит через все элементы и получает только те, у которых указан класс. Хотя было бы проще просто использовать JS-фреймворк. - person TJ L; 12.08.2010
comment
Существует функция, написанная кем-то другим, которая поддерживается, например:ejohn.org/blog/getelementsbyclassname -скорость-сравнение - person matpol; 13.08.2010

arrow_upward
0
arrow_downward

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

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

И в jQuery:

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

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

person Gabriel    schedule 12.08.2010
comment
Поскольку я делаю это для настройки размера элементов... это возможный подход... но он не позволяет мне изменять класс с дробным числом, например, шириной, высотой или размером шрифта данные, которые я показываю - person halfbit; 12.08.2010