ブラウザ間の互換性のために jQuery を使用して要素スタイルのクローンを簡単に作成するにはどうすればよいですか?

jQuery で擬似クローン作成のための要素スタイルを取得する

問題

テキストを含むspan要素があり、次のようなテキスト入力を作成したいとします。その外観と一致します。 jQuery を使用してこれらの要素間でスタイルを複製するにはどうすればよいですか?

既存のアプローチ

1 つの方法は、考えられるすべての CSS プロパティを手動でリストし、jQuery の css メソッドを使用してそれらの値を取得することです。ただし、使用できるスタイルが膨大なため、このアプローチは時間がかかり、エラーが発生しやすくなります。

包括的なソリューション

可能なすべてのスタイルを取得する包括的なツールである jquery.getStyleObject プラグインの紹介要素の計算されたスタイル。このプラグインにより、プロパティを手動でリストする必要がなくなり、IE などのレガシー ブラウザを含むすべてのブラウザとの互換性が確保されます。

実装

プラグインを使用するには、目的の要素で getStyleObject を呼び出すだけです。

var style = $("#element").getStyleObject();

これは、計算されたすべてのスタイルをキーと値のペアとして含むオブジェクトを返します。これらのスタイルを別の要素に適用できます。

$("#cloned_element").css(style);

利点

完全でブラウザ互換:

jquery.getStyleObject は完全なリストを提供します。すべてのブラウザでスタイルを統一し、クロスブラウザを保証します互換性。

拡張性:

必要に応じて、プラグインの JS ファイルを変更して、プラグインに追加のスタイルを追加できます。

例使用法:

要素の複製と適用スタイル:

$("#original").clone()
    .parent()
    .appendTo()
    .css($("#original").getStyleObject());

以上がブラウザ間の互換性のために jQuery を使用して要素スタイルのクローンを簡単に作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。