8

.clone()jQueryメソッドを使用している小さなプロジェクトに取り組んできました。これの落とし穴は、一意の識別子を持つ HTML で使用することです。そこでgetComputedStyle、元のユニークな要素のスタイル プロパティを見つけて、それをクローンにコピーし、後で新しい ID を与えるために実装を続けました (はい、パフォーマンスの問題が発生する可能性がありますが、実験的です)。

jQuery の仕様によると、クローン作成後、追加前にこれを行うと、DOM の外部で操作が行われます (したがって、ID の「違反」は発生しません)。しかし、オブジェクトが複製された後、要素のスタイル プロパティを見つけようとすると、ブラウザー全体で奇妙な動作に気付きました。それ以前は、すべてのブラウザーが同じ値を返しますが、複製された後は次のようになります。

  • Firefox - 気楽で、興味深いことに、クローンの計算されたスタイルは、計算されたデータ (ピクセル単位) ではなく、実際の CSS 値です。

  • IE - 動作しているように見えますが、値は必ずしも正しいとは限りません。

  • Chrome - 計算しません。例を次に示します。

http://codepen.io/anon/pen/zxqmNK?editors=011

var elements = [];
var objects = [];

$('body').find('[id]').each(function() {
    elements.push(this);
});

$('body').clone().find('[id]').each(function() {
    objects.push(this);
});

$.each(elements, function(key, element) {
    var current = window.getComputedStyle(element, null).getPropertyValue('width');
    $('#log').append('<p>' + element.id + ': ' + current + '</p>');
});

$('#log').append('</br>');

$.each(objects, function(count, object) {
    var current = window.getComputedStyle(object, null).getPropertyValue('width');
    $('#log').append('<p>' + object.id + ': ' + current + '</p>');
});

これがバグなのか、以前に同様の動作が見られたのか知っている人はいますか? Web に関してはそれほど多くはありません (Stackoverflow でさえも)。洞察をお寄せいただきありがとうございます。

編集 - さらにテストを行ったところ、IE は Chrome と同じように動作するようです。何も返さない代わりに、すべてが「自動」に設定されています。を使用してクローン オブジェクトのスタイルにアクセスする.css()と、すべての値が返されます0px(背景などのプロパティを含む)。複製されたオブジェクトを、あたかも何らかのスタイルが適用されたかのように扱うのは Mozilla だけのようです。

4

1 に答える 1