回答編集履歴
1
ちょっと回答に不備があったので修正
test
CHANGED
|
@@ -4,23 +4,39 @@
|
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const line1st = document.querySelect('#line_1st');
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
const orgStyle = hoge.style;
|
|
10
10
|
|
|
11
|
+
// スタイルオブジェクトのプロキシオブジェクトを生成
|
|
12
|
+
|
|
13
|
+
const proxyStyle = Object.assign({}, orgStyle);
|
|
14
|
+
|
|
11
|
-
|
|
15
|
+
// styleプロパティにプロキシオブジェクトをセット
|
|
16
|
+
|
|
17
|
+
hoge.style = proxyStyle;
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
// プロキシオブジェクトをフック
|
|
22
|
+
|
|
23
|
+
Object.defineProperty(proxyStyle, 'display', {
|
|
24
|
+
|
|
25
|
+
get: _ => {
|
|
12
26
|
|
|
13
27
|
debugger;
|
|
14
28
|
|
|
15
29
|
return orgStyle.display;
|
|
16
30
|
|
|
17
|
-
},
|
|
31
|
+
},
|
|
18
32
|
|
|
19
|
-
set: val => {
|
|
33
|
+
set: value => {
|
|
20
34
|
|
|
21
35
|
debugger;
|
|
22
36
|
|
|
37
|
+
console.log('set display', value);
|
|
38
|
+
|
|
23
|
-
|
|
39
|
+
orgStyle.display = value;
|
|
24
40
|
|
|
25
41
|
}
|
|
26
42
|
|
|
@@ -31,5 +47,3 @@
|
|
|
31
47
|
といったコードを仕込み、devTools立ち上げてページをリロードすれば、displayスタイルを設定したときに止まるので、
|
|
32
48
|
|
|
33
49
|
あとはコールスタック辿ればどこで設定しているのかを調べることができます。
|
|
34
|
-
|
|
35
|
-
また、setter内でorgStyleに値を設定しなければ、displayスタイルが変更されることもないでしょう。
|