jquery - インライン スタイルが適用されている場合、外部 css ファイルから css プロパティを取得する方法は?

Question

インラインスタイルが同じ要素に適用されている場合、js/jqueryを使用して外部ソースからcssプロパティを取得する方法は? 例：

<div id="my" style='left:100px'>some content</div>
<style>
    #my{left:250px;}
</style>

インライン スタイルを削除せずに可能であれば、250px を返したいですか?

Answer 1

ページの読み込み後にマークアップを変更できますか? その場合、jQuery を使用して style 属性を空の値に変更します。次に、jQuery を介して左の値を取得します。

var my = $('#my');
my.attr('style','');
var position = my.position();
alert(position.left);

または、変数をキャッシュしたくない場合:

$('#my').attr('style','');
alert($('#my').position().left);

Answer 2

最適なオプションは、インライン スタイルを一時的に削除し、読み込んで元に戻すことだと思います。

スタイルが取り除かれている間は、要素のグラフィカルな変更は表示されません。速すぎるだけです。

http://jsfiddle.net/fp7UB/

function readstyle() {
    var el = document.getElementById('my');
    var attr = el.getAttribute('style');
    el.setAttribute('style', '');
    var val = el.offsetLeft;
    el.setAttribute('style', attr);
    return val;
}​

Answer 3

.cssこれを行う 1 つの方法は、 AJAX (使いやすいjQuery を使用できます) を介してファイルをダウンロードし、JSCSPPまたは同等のもの ( jQuery で記述された別のパーサー$.get()) を使用して解析することです。これはやり過ぎと思われるかもしれませんが、1 回の取得プロセスですべてのルールにアクセスできるという利点があります。