Si je l'utilise « getElementById » pour modifier un style CSS d'un seul objet, comment puis-je modifier tous les éléments qui héritent du style?

Question

Tous les exemples que j'ai vu utiliser « getElementById » pour obtenir le seul élément, puis changer ce style pour cet élément singulier.

Je suis dans la situation où je dois modifier tous les éléments correspondants sur la page avec un style. Je dois changer la taille de la police, la hauteur et la largeur. Comment puis-je faire, et est jQuery obligatoire ou facultative? La raison pour laquelle je demande est parce que ce site n'utilise jQuery et je préfère ne pas télécharger la bibliothèque entière juste pour accomplir cette chose.

Mise à jour À titre d'exemple, supposons que j'ai plusieurs éléments sur la page avec ce 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 */ 

}

Et alors supposer que j'ai une fonction JavaScript qui proportionnellement redimensionner les éléments ci-dessus selon une barre de défilement. La barre de défilement J'utilise est disponible à partir d'une 3ème partie ici: http://aspnetajax.componentart.com/control-specific/ curseur / caractéristiques / custom_Scrollbar / WebForm1.aspx

Ce curseur passera alors un certain nombre que je vais utiliser pour déterminer combien de zoom avant / arrière:

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

}

Comment recommandez-vous je gérer la valeur « PercentChange »? Je peux échanger le style CSS pour chaque élément correspondant à l'aide d'un statment de commutation, mais qui ne peut pas être aussi lisse que d'autres options pourraient être.

MAJ2

, si quelqu'un veut également regarder mon code, un échantillon autonome est ici: http://www.perfmon.com/download/StackOverflow_ContactsGrid.zip

Si vous téléchargez les contrôles de ComponentArt, ne hésitez pas à décommenter le code barre de défilement.

Mon but est d'imiter directement la fonction de zoom disponible dans Outlook 2007

Answer 1

Alors disons que vous avez un fichier HTML comme ça ...

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

Vous avez besoin certains de ces éléments pour être zoomable / redimensionnable. Tout d'abord, vous devez identifier les éléments en utilisant identificateurs d'élément ; soit l'attribut id ou l'attribut class.

La différence entre les deux est un attribut id doit être unique; puisque nous avons besoin de plusieurs éléments à identifier comme zoomable, nous allons utiliser un attribut class à la place. Nous allons utiliser une réponse appropriée, la valeur de soi, comme 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>

Notez que l'élément <img> avait déjà un attribut class, mais nous pouvons attribuer cet élément à plusieurs classes, selon le recommandation w3c :

  

Cet attribut assigne un nom de classe ou un ensemble de noms de classe à un élément. Un nombre quelconque d'éléments peuvent avoir le même nom de classe ou les noms. Les noms de classes doivent être séparés par des espaces blancs.

Nous avons compris le balisage. Maintenant, pour le JavaScript.

Une fois que nous l'avons fait, vous pouvez utiliser la fonction document.getElementsByClassName(...) pour obtenir des références à tous les éléments de 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';
}

... mais ce n'est pas pris en charge dans Internet Explorer, de sorte que vous devrez utiliser Objet détection pour déterminer si vous devez définir la place:

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

Cela ne résout pas complètement le problème, mais il devrait vous mettre sur la bonne voie.

Answer 2

Si vous google getelementbyclassname qui pourrait vous aider. idée similaire à getElementByID mais les obtient par classname vous pouvez les modifier leurs styles comme bon vous semble.

Answer 3

Ma recommandation serait de créer la classe que vous avez besoin dans votre fichier CSS et changer avec jQuery.

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

Et dans jQuery:

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

De cette façon, vous n'avez pas besoin de faire quoi que ce soit « bizarre » et compliqué pour obtenir le résultat que vous avez besoin.