「GetElementByID」を使用して、単一のオブジェクトのCSSスタイルを変更する場合、スタイルを継承するすべての要素を変更するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/3469481

質問

私が見たすべての例は、「getelementbyid」を使用して単一の要素を取得し、そのスタイルをその特異要素のために変更します。

私は、スタイルでページ上のすべての一致する要素を変更する必要がある状況にあります。フォントのサイズ、高さ、幅を変更する必要があります。これを行うにはどうすればよいですか？jqueryは必要ですか、それともオプションですか？私が尋ねる理由は、このサイトがJQueryを使用しておらず、この1つのことを達成するためだけにライブラリ全体をダウンロードしたくないからです。

アップデート例として、このスタイルでページにいくつかの要素があるとします。

.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-pecific/slider/features/custom_scrollbar/webform1.aspx

そのスライダーは、ズームイン/アウトする量を判断するために使用する番号を渡します。

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

}

「パーセントチェンジ」値を処理することをどのようにお勧めしますか？スイッチの統計を使用して、各マッチング要素のCSSスタイルを交換することができますが、それは他のオプションほどスムーズではないかもしれません。

update2

また、誰かが私のコードを見たい場合は、自己封じ込められたサンプルがここにあります。http://www.perfmon.com/download/stackoverflow_contactsgrid.zip

ComponentArt Controlsをダウンロードする場合は、Scrollbarコードを自由に除外してください。

私の目標は、Outlook2007で利用可能なズーム機能を直接エミュレートすることです

alt text

役に立ちましたか？

解決

それで、あなたがこのような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 属性。

2つの違いはanです 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';
}

...しかし、それはインターネットエクスプローラーでサポートされていないので、あなたは使用する必要があります オブジェクトの検出 代わりに定義する必要があるかどうかを判断するには：

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

これはあなたの問題を完全に解決するわけではありませんが、それはあなたを正しい道に設定するはずです。

他のヒント

Google GetElementByByClassNameの場合は、それが役立つかもしれません。 GetElementByIDと同様のアイデアがありますが、クラス名でそれらを取得すると、フィット感としてスタイルを変更できます。

私の推奨事項は、CSSファイルに必要なクラスを作成し、jQueryで変更することです。

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

そしてjqueryで：

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

これにより、必要な結果を得るために「奇妙な」ことをする必要はありません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top