Wenn ich „getElementById“ verwenden, um einen CSS-Stil eines einzelnen Objekts zu verändern, wie ändern ich alle Elemente, die den Stil erben?

Question

All Beispiele, die ich gesehen habe use „getElementById“ das einzelne Element zu bekommen, und dann diesen Stil für dieses singuläre Element ändern.

Ich bin in der Situation, wo ich brauche alle die passenden Elemente auf der Seite mit einem Stil zu ändern. Ich brauche die Schriftgröße, Höhe und Breite zu ändern. Wie kann ich das tun, und ist jQuery erforderlich oder optional? Der Grund, warum ich frage ist, weil diese Seite nicht jQuery und ich möchte lieber nicht über die gesamte Bibliothek laden Sie einfach diese eine Sache zu erreichen.

Aktualisieren Als Beispiel nehme ich auf der Seite mit diesem Stil mehrere Elemente haben:

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

}

Und dann gehe ich davon eine JavaScript-Funktion, die proportional die Elemente oben nach einem Schieberegler die Größe wird. Der Schieberegler Ich verwende ist aus einer 3rd-Party finden Sie hier: http://aspnetajax.componentart.com/control-specific/ Schieber / features / custom_Scrollbar / WebForm1.aspx

Das Schieber wird dann eine Reihe passieren, dass ich feststellen, verwenden, um wie viel würde vergrößern / verkleinern:

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

}

Wie würden Sie empfehlen ich die „PercentChange“ Wert handhaben? Ich kann den CSS-Stil für jedes Anpassungselement mit einer Switch-Anweisung tauschen, aber das ist nicht so glatt sein kann als andere Optionen sein könnten.

UPDATE2

Auch, wenn jemand will, um meinen Code suchen, eine in sich geschlossene Probe ist hier: http://www.perfmon.com/download/StackOverflow_ContactsGrid.zip

Wenn Sie die ComponentArt Steuerelemente herunterladen, können Sie den Scrollbar Code Kommentar-.

Mein Ziel ist es, direkt die Zoom-Funktion in Outlook 2007

zu emulieren

Answer 1

Also lassen Sie uns sagen, Sie haben einige HTML-ähnliche ...

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

Sie müssen einige dieser Elemente zoombaren / Wieder ansehnliche sein. Zuerst müssen Sie die Elemente identifizieren, mit Elementidentifikatoren ; entweder das id Attribut oder das class Attribut.

Der Unterschied zwischen den beiden ist ein id Attribut muss eindeutig sein; da wir einige Einzelteile müssen als zoombare identifiziert werden, werden wir stattdessen eine class Attribut verwenden. Wir werden einen angemessenen, selbstverständlich Wert, wie zoomable verwenden.

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

Beachten Sie, dass das <img> Element bereits ein class Attribut hatte, aber wir können das Element, um mehrere Klassen zuweisen, nach der auf w3C Recommendation :

  

Dieses Attribut weist einen Klassennamen oder Satz von Klassennamen zu einem Elemente. Eine beliebige Anzahl von Elementen können die gleiche Klassennamen oder Namen zugeordnet werden. Mehrere Klassennamen müssen durch Leerzeichen getrennt werden.

So haben wir das Markup herausgefunden. Jetzt für die JavaScript.

Sobald wir das getan haben, können Sie die document.getElementsByClassName(...) Funktion Verweise auf alle jene zoomable Elemente zu erhalten:

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

... aber es ist nicht in Internet Explorer unterstützt, so dass Sie Objekt verwenden müssen werden Erkennung , um festzustellen, ob Sie es definieren müssen statt:

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

Dies ist nicht vollständig Ihr Problem lösen, aber es sollte Dich auf dem richtigen Weg.

Answer 2

Wenn Sie getelementbyclassname google, die Ihnen helfen könnten. Ähnliche Idee getElementByID aber sie von Klassennamen bekommt man kann sich ihre Stile ändern, wie Sie sehen, passen.

Answer 3

Meine Empfehlung wäre, die Klasse zu erstellen, dass Sie in Ihrer CSS-Datei benötigen, und ändern Sie es mit jQuery.

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

Und in jQuery:

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

Auf diese Weise brauchen Sie nicht etwas „seltsam“ und kompliziert zu tun, um das Ergebnis zu erhalten, die Sie benötigen.