[解決済み】「スタイル変更」イベントをリッスンすることは可能ですか?
2022-04-05 04:32:12
質問
jQueryで、スタイルの変更にバインドできるイベントリスナーを作成することは可能でしょうか?例えば、ある要素の寸法が変更されたときや、style属性が変更されたときに何かをしたい場合、私はそれを行うことができます。
$('div').bind('style', function() {
console.log($(this).css('height'));
});
$('div').height(100); // yields '100'
本当に便利でしょうね。
何かアイデアはありますか?
アップデイト
自分で回答しておいて申し訳ないのですが、どなたかに合うかもしれないので、きちんとした解決策を書きました。
(function() {
var ev = new $.Event('style'),
orig = $.fn.css;
$.fn.css = function() {
$(this).trigger(ev);
return orig.apply(this, arguments);
}
})();
これは、内部のprototype.cssメソッドを一時的にオーバーライドし、最後にトリガーをつけて再定義するものです。つまり、このように動作します。
$('p').bind('style', function(e) {
console.log( $(this).attr('style') );
});
$('p').width(100);
$('p').css('color','red');
解決方法は?
jQueryはオープンソースであるため、以下のように手を加えることができると思います。
css
関数が呼び出されるたびに (jQuery オブジェクトを渡して) 好きな関数を呼び出すようにします。 もちろん、jQueryのコードを精査して、CSSプロパティを設定するために内部で使用しているものが他にないことを確認する必要があります。 理想的には、jQueryのプラグインを別に書いて、jQueryライブラリ自体に干渉しないようにしたいところですが、それがあなたのプロジェクトで実現可能かどうかを判断する必要があります。
関連
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] イベントバブリング、キャプチャーとは何ですか?
-
[解決済み] jQueryのイベントハンドラを削除する最良の方法?
-
[解決済み] イベントを発生させた要素のIDを取得する
-
[解決済み] .css()関数で追加したスタイルを削除するにはどうしたらいいですか?
-
[解決済み] jQuery チェックボックスの変更とクリックイベント
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】Uncaught SyntaxError: JSON の位置 0 に予期しないトークン u があります。
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】jQueryでCSSのクラス変更時にイベントを発生させる。