Se eu usar o "getElementbyId" para alterar um estilo CSS de um único objeto, como alterar todos os elementos que herdam o estilo?

Question

Todos os exemplos que eu vi usam "getElementById" para obter o elemento único e depois alterar esse estilo para esse elemento singular.

Estou na situação em que preciso modificar todos os elementos correspondentes na página com um estilo. Preciso alterar o tamanho, a altura e a largura da fonte. Como faço isso, e o jQuery é necessário ou opcional? A razão pela qual pergunto é porque este site não usa jQuery e eu prefiro não baixar toda a biblioteca apenas para realizar essa coisa.

AtualizarComo exemplo, suponha que eu tenha vários elementos na página com este estilo:

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

}

E, em seguida, suponha que eu tenha uma função JavaScript que redimensione proporcionalmente os elementos acima de acordo com uma barra deslizante. A barra deslizante que estou usando está disponível em uma terceira festa aqui:http://aspnetajax.componenterlart.com/control-specific/slider/features/custom_scrollbar/webform1.aspx

Esse controle deslizante passará por um número que eu usarei para determinar quanto para aumentar/diminuir o zoom:

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

}

Como você recomenda eu lidar com o valor "percentchange"? Posso trocar o estilo CSS por cada elemento correspondente usando uma declaração de switch, mas isso pode não ser tão suave quanto outras opções poderiam ser.

Atualização2

Além disso, se alguém quiser olhar para o meu código, uma amostra independente está aqui:http://www.perfmon.com/download/stackoverflow_contactsgrid.zip

Se você baixar os controles do componentet, sinta -se à vontade para descomentar o código da barra de rolagem.

Meu objetivo é imitar diretamente o recurso de zoom disponível no Outlook 2007

Answer 1

Então, digamos que você tenha algum html assim ...

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

Você precisa de alguns desses elementos para serem zoomáveis/re-irmãos. Primeiro, você precisa identificar esses elementos usando Identificadores de elementos; ou o id atributo ou o class atributo.

A diferença entre os dois é um id o atributo deve ser único; Como precisamos de vários itens para serem identificados como zoomáveis, usaremos um class atributo em vez disso. Usaremos um valor apropriado e evidente, como 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>

Observe que o <img> elemento já tinha um class atributo, mas podemos atribuir esse elemento a várias classes, de acordo com Recomendação W3C:

Este atributo atribui um nome de classe ou conjunto de nomes de classe a um elemento. Qualquer número de elementos pode receber o mesmo nome ou nomes da classe. Vários nomes de classe devem ser separados por caracteres do espaço em branco.

Então, descobrimos a marcação. Agora para o JavaScript.

Depois de fazer isso, você pode usar o document.getElementsByClassName(...) função para obter referências a todos aqueles zoomable Elementos:

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

... mas não é suportado no Internet Explorer, então você terá que usar Detecção de objetos Para determinar se você precisa defini -lo:

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

Isso não resolve completamente seu problema, mas deve defini -lo no caminho certo.

Answer 2

Se você Google GetElementByClassName, isso pode ajudá -lo. Ideia semelhante ao getElementById, mas os recebe por ClassName, você pode modificar seus estilos como achar melhor.

Answer 3

Minha recomendação seria criar a classe que você precisa no seu arquivo CSS e alterá -lo com o jQuery.

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

E em jQuery:

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

Dessa forma, você não precisa fazer nada "estranho" e complicado para obter o resultado de que precisa.