11

私はここで同じ質問をしています（コメントできませんでした、おそらく特権を持っていません）、スタイルシートで定義されたCSS幅の値を取得したいのですが、DOMのどの要素にもまだ適用されていません（レスポンシブのグリッドを備えたブートストラップCSSメディアクエリ)

 .span6 {
 width: 570px;
 }

ただし、上記の質問で提供される解決策は0を返します。つまり、このようになります

$('<div/>').addClass('span6').width();

しかし、私がこのようなことをするとうまくいきます

 $('<div/>').addClass('span6').hide().appendTo('body').width();

そのdivを追加せずに簡単な方法はありますか?

4

2 に答える 2

29

存在しない要素からCSSプロパティ値を読み取るには、その要素を（非表示として）DOMに動的に挿入し、プロパティを読み取り、最後に削除する必要があります。

var getCSS = function (prop, fromClass) {

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    $("body").append($inspector); // add to DOM, in order to read the CSS property
    try {
        return $inspector.css(prop);
    } finally {
        $inspector.remove(); // and remove from DOM
    }
};

ここにjsFiddle

于 2012-06-09T06:36:40.740 に答える
4

ホセによる素晴らしい答え。より複雑な css セレクターに役立つように修正しました。

var getCSS2 = function (prop, fromClass, $sibling) {

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    if($sibling != null){
        $sibling.after($inspector); //append after sibling in order to have exact 
    } else {
        $("body").append($inspector); // add to DOM, in order to read the CSS property
    }
    try {
        return $inspector.css(prop);
    } finally {
        $inspector.remove(); // and remove from DOM
    }
};

JSFiddle

于 2014-03-17T21:37:05.293 に答える