insdays

head内に書けないし…、@importもなぁ…。って時

body内に外部CSSファイルをjavascriptで読み込む方法

  • 2018.12.18
  • CSS
このページだけに「外部CSSファイル」を読み込みたいけど…。
head内には書けないし、このページだけだから@importもなぁ…。って時にはこれ

普通はhead内に

普通はhead内に下記で呼び込む。数が増えれば何行も 
<link rel="stylesheet" href="css/style.css" type="text/css" />
もしくは、cssファイルに 
@import url("css/style.css");
もしくは、head内に 
<style type="text/css">
@import url("css/style.css");
</style>
これじゃないんだ！body内で呼びたいんだ！って時

body内に外部CSSファイルを読み込む

body内に javascript を使用して外部CSSファイルを読み込んであげて解決！ 
<script type=”text/javascript”>
window.onload=function(){
var css=document.createElement(“link”);
css.setAttribute(“rel”,”stylesheet”);
css.setAttribute(“type”,”text/css”);
css.setAttribute(“href”,”css/style.css”);
document.getElementsByTagName(“head”)[0].appendChild(css);
}
</script>

html5.2からbody内OK

html5.2からbody内に下記のように直接書いても良くなったから短ければ直接書いたほうが良いのかな？
でも、あまり推奨はされてないっぽい…？ 
<style>
body {
  margin: 0;
}
</style>

scopedは…

html5から使えるscopedが使えれば…。でも、ブラウザ対応してないし…。 
<style scoped>
body {
  margin: 0;
}
</style>
よくわからん。対応するならしろ！使っていいけど推奨しないとか、なんなんだ！
とりあえず、javascriptで読み込むことにする。

Copyright 2018 insdays