web-dev-qa-db-ja.com

開発者がCSSで指定したものに基づいて、jQueryを使用して要素の幅をパーセントまたはピクセルで取得することは可能ですか？

私はjQueryプラグインを書いていますが、ユーザーが指定する要素の幅を決定することができなければなりません。問題は、.width（）または.css（ 'width'）は、開発者が割り当てた場合でも、常に正確なピクセルを報告することです。 CSSで幅：90％。

開発者がCSSで与えたものに応じて、jQueryに要素の幅をpxまたは％で出力させる方法はありますか？

jquerycsswidth
49
joren

最良の方法は自分で計算することです：

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width();
var percent = 100*width/parentWidth;
84
Matt Ball

間違いなく可能です！

最初に親要素を非表示にする必要があります。これにより、JavaScriptが子要素のピクセルを計算できなくなります。

$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);

例 を参照してください。

10
timofey.com

スタイルシート（「スタイル」）オブジェクトアクセスを直接使用できると思います。それでも、ブラウザによるYMMV。例えばElm.style.width。

ピーターのコメントの編集::「％を取得する」つもりはありません。質問ごとに：

私ができる必要があるのは、ユーザーが指定する要素の幅を決定することです... [方法は]開発者がCSSで与えたものに応じて、要素の幅をpxまたは％で出力しますか？

したがって、「生の」CSS値を取得する代替手段を提供しました。これはFF3.6で動作するようです。 YMMVの別の場所（netadictosの答えは、よりポータブル/ユニバーサルかもしれませんが、わかりません）。繰り返しますが、これは「％を取得する」ことを期待していないです。

9
user166390

その方法は、このstackoverflowの質問に記載されています。

JavaScriptを使用してCSSルール値を読み取る方法

知っておく必要があるのは、どのスタイルシートがクラスであるか、またはすべてのスタイルシートをループすることだけです。次の関数は、クラスのすべての機能を提供します。探している機能を抽出するために正規表現を実行するのは簡単です。

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {

        if(classes[x].selectorText==className) {
                (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
        }
    }
}
getStyle('.test');
2
netadictos

元の要素の割合を新しい割合に再割り当てする場合は、CSSでその値を定義し、新しいCSS定義を反映するように何らかの方法で要素識別子（クラス、IDなど）を変更することをお勧めします。新しいパーセンテージ変数を可変にする必要がある場合、これは常に適用されるとは限りません。

.myClass{
    width:50%;
}

.myNewClass{
    width:35%;
}

この（または他の）メソッドによる削除の追加：

$('.myClass').removeClass('myClass').addClass('myNewClass');
1
Andrew Liles

私の目的のために、MДΓΓБДLLの答えを推定しました。

覚えておいて、私は全体の割合でのみ作業している。

    var getPercent = function(elem){
        var elemName = elem.attr("id");
        var width = elem.width();
        var parentWidth = elem.offsetParent().width();
        var percent = Math.round(100*width/parentWidth);
        console.log(elemName+"'s width = "+percent+"%");
    }

    getPercent($('#folders'));
    getPercent($('#media'));
    getPercent($('#player'));
1
Alan Mabry

スタイルタグを使用して設定する場合、単に.prop（）を使用できます
例えば。 $（ '。selector'）。prop（ 'style'）。width.replace（ '％'、 ''）

0
Jay Shah

もっとjqueryishにするために

これを追加

$.fn.percWidth = function(){
  return this.outerWidth() / this.parent().outerWidth() * 100;
}

そして使用する

$(selector).percWidth()

これは、％記号なしでパーセント値を返すため、計算で使用できます

0
Nick Ginanto