カテゴリー
Google Adsenseで勝手にCSSスタイルに注入されてしまう「height: auto !important」をMutationObserverで抑える
※ 当ページには【広告/PR】を含む場合があります。
2023/01/14
height: autoheight: autoMutationObserverを使ったDOMの監視
index.html<body>...</body>
...
<body>
...
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async></script>
...
</body>
height: autoindex.html
...
<script>
document.querySelectorAll('.mut-height-guard').forEach((target) => {
const heightChangeObserver = new MutationObserver(() => {
target.style.height = "";
});
heightChangeObserver.observe(target, {
attriblutes: true,
attributeFilter: ['style']
});
});
</script>
...
height: auto !important;class="mut-height-guard"class
...
<article>
<div class="mainWrap">
...ページのメインの内容(height: autoで問題ない要素)
</div>
<div class="sideMenu mut-height-guard">
...☝サイドバー(height: autoになってほしくない要素)に指定する
</div>
</article>
...
height: auto !important;class="mut-height-guard"まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー