JavaScriptでstyle属性が変更されたら発火

ご覧いただきありがとうございます。
現在、カートASPにおいてECサイト構築しております。
そこで実装されているモーダルが表示されたら特定の処理を実行したいです。

その要素のstyle属性がdisplay:blockに変更されたら発火、ということは可能でしょうか？

MutationObserverやDOMSubtreeModified propertychangeを仕様してみましたがモーダル内のHTMLが変化するわけではないのでうまく動作しません。

色々と調べてみてもそれっぽい情報が見つからないので困っております。

何卒ご教授いただければ幸いです。
恐れ入りますがよろしくお願いいたします。

HTML
1<!-- これが -->
2<div class="modal" style="display:none">
3// modalの中身
4</div>
5
6<!-- こうなれば発火 -->
7<div class="modal" style="display:block">
8// modalの中身
9</div>

m.ts10806

2020/10/21 23:49

失敗したもので結構ですので、自身がやってみたコードを提示してください。

miyabi_pudding

2020/10/22 01:06

もしかして、JS上の、スタイル処理が走った後に実行したい処理がある、ということでしょうか？ JSは基本的に同期処理なので、そのままスタイル処理をした次行で実行すれば大丈夫かと思いますが・・・。

Lhankor_Mhy

2020/10/22 10:04

あえて CSS transition をつけて transitionend イベントを発火させるという手法も、ワンチャンあるかも。

行動規範の内容に同意します

回答2件

ご質問の、

MutationObserverやDOMSubtreeModified propertychangeを仕様してみましたがモーダル内のHTMLが変化するわけではないのでうまく動作しません。

というのがよく分かりません。
MutationObserverを使うなら、以下でいけませんか？（質問にご提示のHTML想定）

JavaScript
1const target = document.querySelector('.modal');
2
3const observer = new MutationObserver(mutations => {
4  mutations.forEach(({target, oldValue}) => {
5    if (/display *: *none/.test(oldValue) && target.style.display === 'block') {
6      alert('ここで好きな処理');
7    } 
8  });    
9});
10 
11observer.observe(target, {
12  attributes: true,
13  attributeFilter: ['style'],
14  attributeOldValue: true,
15});

それっぽい情報が見つからないとのことですが、MutationObserver - Web API | MDNにあります。
「とは検索」みたいな感じで、まずは「mdn検索」おすすめです。

投稿2020/10/21 20:30

編集2020/10/22 01:40

shinji709

総合スコア805

think49

2020/10/21 23:37

回答の本筋ではありませんが、 > それっぽい情報が見つからないとのことですが、こちらにあります。「こちら」はリンク先を表す名前ではないので、好ましくないように思います。 https://www.fujitsu.com/jp/about/businesspolicy/tech/design/ud/jis-sc/sc7244.html

m.ts10806

2020/10/21 23:50

リンクとして気づかせるには名称もですが文言が短いですね（「参考」とかならまだ分かるのですけど）

shinji709

2020/10/22 01:41

指摘を受けリンクの「こちら」を修正しました

行動規範の内容に同意します

モーダルを開くために恐らく、クリックイベントを使用していると思います。
その中にif文などで分岐させる処理を書けば良いと思います。
下記に例としてコードを置いておきます。
モーダルが表示されたらコンソールログに
特定の処理と表示する処理をしてます。

コメントアウト部分はcssにあらかじめ、モーダル表示のためにクラスを
用意していた場合の記述です。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <style>
8        div {
9            display: none;
10            width: 30vw;
11            height:30vw;
12            background:rgb(200, 218, 173);
13            position:absolute;
14            top:50%;
15            left:50%;
16            transform: translate(-50%,-50%);
17        }
18
19        button {
20            position:absolute;
21            bottom:10%;
22            left:50%;
23            transform: translate(-50%);
24            font-size: 20px;
25        }
26
27        .show {
28            display: block;
29        }
30
31    </style>
32</head>
33<body>
34    <div></div>
35    <button>モーダルOpen</button>
36    <script>
37    const div = document.getElementsByTagName("div")[0];
38    const btn = document.getElementsByTagName("button")[0];
39
40    // btn.addEventListener("click",()=> {
41    //     div.classList.toggle("show");
42    //     if(div.classList.contains("show")) {
43    //         console.log("特定の処理");
44    //     }
45    // });
46
47    btn.addEventListener("click",()=> {
48        if(div.style.display == "block"){
49            div.style.display = "";
50        } else {
51            div.style.display = "block";
52            console.log("特定の処理");
53        }
54    })
55
56    </script>
57</body>
58</html>

投稿2020/10/21 17:59

編集2020/10/22 09:51

Jon_do

総合スコア1373

yambejp

2020/10/22 00:42

MutationObserverより、変化させるトリガーになるイベントからアプローチするこちらのほうが楽ですね。

soma

2020/11/03 04:33

ご回答ありがとうございます。色々と試してはいるのですが、うまく動作しません。おそらく編集(カスタマイズ)可能な部分よりも下にASPのmodalを制御するJSが設置されているためかと思います。クリック時のstyle属性判定すると display:none のままです。 ajax処理の結果を表示するmodalのためn秒後に実行なども不適格かと思います…。

行動規範の内容に同意します

あなたの回答