ルールが次のとおりだとします。

.largeField {
    width: 65%;
}

ピクセル値ではなく、どういうわけか「65％」を取り戻す方法はありますか？

ありがとう。

編集：残念ながら、他のスタイルシートをインポートするスタイルシートがあり、結果としてcssRulesパラメータがnullまたは未定義の値で終わるため、DOMメソッドの使用は私の場合は信頼できません。

このアプローチは、しかし、最も簡単な例（1つのスタイルシート、内部に複数の独立したスタイルシート宣言でうまくいくヘッド文書のタグを）。

組み込みの方法はありません、私は恐れています。あなたはこのようなことをすることができます：

var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

最も簡単な方法

$('.largeField')[0].style.width

// >>> "65%"

これは間違いなく可能です！

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

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

私の例を見てください。

さて...私はこのハックを最初に発見したのだろうか:)

更新：

一発ギャグ

element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');

</body>タグの前に、必要に応じて非表示要素を残すことができます.remove()。

ワンライナーの例をご覧ください。

私はより良いアイデアに心を開いています！

document.styleSheetsオブジェクトにアクセスできます：

<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script type="text/javascript">
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; i < rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

遅いですが、新しいユーザーの場合、CSSスタイルにパーセンテージが含まれている場合は、これを試してください。

$element.prop('style')['width'];

Adamsの回答に基づくjQueryプラグイン：

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
        return Math.round(100*width)+'%';
    };

})(jQuery);

$('body').html($('.largeField').getWidthInPercent());​​​​​

「65％」を返します。必要に応じて（width == '65％'）のように機能する場合にのみ、丸めた数値を返します。Adamsの回答を直接使用したとしたら、それはうまくいきませんでした（私は64.93288590604027のようなものを手に入れました）。:)

timofeyの優れた驚くべきソリューションに基づいて、純粋なJavascript実装を以下に示します。

function cssDimensions(element)
  var cn = element.cloneNode();
  var div = document.createElement('div');
  div.appendChild(cn);
  div.style.display = 'none';
  document.body.appendChild(div);
  var cs = window.getComputedStyle
    ? getComputedStyle(cn, null)
    : cn.currentStyle;
  var ret = { width: cs.width, height: cs.height };
  document.body.removeChild(div);
  return ret;
}

それが誰かに役立つことを願っています。

jQueryでグローバルスタイルシートの値を取得する際にも同様の問題がありますが、最終的には上記と同じソリューションを思いつきました。

他の人が後の調査結果から利益を得られるように、2つの質問を相互に関連付けたいと思っていました。

jQueryでアクセスする必要があるスタイルを次のいずれかに配置できます。

1. 文書の頭
2. インクルードでは、どのサーバー側スクリプトが先頭に置かれるか

次に、（必ずしも簡単ではありませんが）js関数を記述して、ドキュメントヘッドのスタイルタグ内のすべてを解析し、必要な値を返すことができるはずです。

css（width）関数を使用して、要素の現在の幅を返すことができます。

すなわち。

var myWidth = $("#myElement").css("width");

参照：http : //api.jquery.com/width/ http://api.jquery.com/css/

jQueryには何もありませんし、JavaScriptにも簡単なものはありません。timofeyの答えを取り入れて実行し、必要なプロパティを取得するために機能するこの関数を作成しました。

// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for 
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties) {
    if(!(properties instanceof Array)) properties = [properties]

    var parent = domNode.parentNode
    if(parent) {
        var originalDisplay = parent.style.display
        parent.style.display = 'none'
    }
    var computedStyles = getComputedStyle(domNode)

    var result = {}
    properties.forEach(function(prop) {
        result[prop] = computedStyles[prop]
    })

    if(parent) {
        parent.style.display = originalDisplay
    }

    return result
}

相互乗算を使用して、ピクセルからパーセントに変換します。

数式の設定：

1.）（element_width_pixels / parent_width_pixels）=（element_width_percentage / 100）

2.）element_width_percentage =（100 * element_width_pixels）/ parent_width_pixels

実際のコード：

<script>

   var $width_percentage = (100 * $("#child").width()) / $("#parent").width();

</script>