1

ロードされた Web ページの利用可能な css クラスを読み取ることができる必要があります。DOM 要素に割り当てられたクラスではなく、CSS で定義されたクラスです。これはjavascript、または具体的にはjQueryで可能ですか?

私が使用している CMS (concrete5) に組み込まれている列をオーバーライドするハックな方法を試みているので、ご容赦ください。読み込み時には、 などの特定のインライン パーセンテージ幅を持つ多数の div が存在しstyle="width: 27%;"ます。.one私の CSS には、.two、.three、 など、これらの div に一致させたいグリッド システムのクラスがいくつかあります。

たとえば、ここに 3 つの CSS クラスがあります。

.one { width: 8.3333%; }
.two { width: 16.6667%; }
.three { width: 25%; }

私の div の 1 つにインライン スタイルがありwidth: 22%;ます。この場合は、最もよく一致するクラスを割り当て.three、インライン スタイルをプログラムで削除します。要素にアタッチされていない場合のスタイルを読み取る方法、.one, .two, .three, etcつまり、css から直接読み取る方法はありますか? これらの値は変更される可能性があるため、これらの値をハードコーディングする必要はありません。

4

1 に答える 1

1

CSSクラスの幅は、次のように取得できます。

function getClassWidth(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i = 0; i < classes.length; i++) {
        if (classes[i].selectorText == className) {
            return classes[i].style.getPropertyValue("width");
        }
    }
}

getClassWidth('.one'); // Would return the string "8.3333%"

この答えに基づく解決策。

于 2012-11-03T00:39:17.637 に答える