とあるホテルのサイトに外部ウィジェットを貼りつける際にレスポンシブに対応する為に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
<style>
div#hoge {
width: auto !important;
}
</style>
簡単に言うと!important;は最優先にするって意味で、これはelement.styleよりも優先される。
そう、最初から難しい事を考えずCSSだけで解決が出来たんだw
こういった本を読んだ方が良いのかな?頼んできた相手は・・・(^^;)
俺は専門外なので不要だ(笑)
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)
- 作者: 森本恭平,平谷奈緒子,中西生乃
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/08/17
- メディア: 単行本
- この商品を含むブログを見る
いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 「いちばんやさしい教本」シリーズ
- 作者: 赤間公太郎,大屋慶太,服部雄樹
- 出版社/メーカー: インプレス
- 発売日: 2016/04/04
- メディア: Kindle版
- この商品を含むブログを見る