!importantは最優先 - 京都の片隅でぼんやりしてます

とあるホテルのサイトに外部ウィジェットを貼りつける際にレスポンシブに対応する為にwidthをautoにしたいのだけど、JavaScriptで直接幅を指定されてるからどうしたら良いかわからん？

って質問があった。

専門外なんだけどなぁ～と思いつつ、何か方法あるやろと簡単に引き受けてみた。

最初に思いついたのは、PHPでHTMLを取得して、styleを置換して書き換えてやる方法。

これは致命的な問題がある事にすぐに気づいた。

相手はJavaScriptなのでPHPでは実行されない。なのでPHPで取得しようとしてもJavaScrip実行前のHTMLしか取得が出来ない。

次に考えたのは最後の最後にCSSを記述する方法

幸いな事にJavaScript実行後のHTMLはブラウザの開発モードで見ればわかり、idが指定されてるのでこれを利用してwidthを上書きしようと考えた。

これはCSSの読込み順に関係なく、タグの中で直接styleを指定してあると優先になるようで失敗。

それなら、JavaScriptでElementを取得してstyleを上書きしてやろうと考えた。

しかし、これはJavaScriptが並行で実行され、外部に情報を取得しにいくウィジェットの方が遅いので書き替えるべきIDが見つからずに失敗。

うーん、これは無理なのか？と思ってたら、実はすごく簡単な話だった。

IDがhogeだとすると以下のようなCSSを書いてやればOK

簡単に言うと!important;は最優先にするって意味で、これはelement.styleよりも優先される。

そう、最初から難しい事を考えずCSSだけで解決が出来たんだｗ

こういった本を読んだ方が良いのかな？頼んできた相手は・・・（＾＾；）

俺は専門外なので不要だ（笑）