javascriptでstyleをheadに追加しよう

//javascriptでstyleをheadに追加しよう

javascriptでstyleをheadに追加しよう

サイトでcssに初めのうちにbodyタグにopacity: 0をつけて、javascriptでフェードインさせている事があります。これってjavascriptが動かない環境だとサイトがみえないんですよねぇ。

なので、javascriptが動く環境だからこそ、javascriptでopacity: 0にしたらインじゃないでしょうか。

jQueryは</body>直前に置きたいので、javascriptで<head>に記述します。(そうしないと、表示→消える→フェードインみたいなことになることがある)

 

<script>
var newStyle = document.createElement('style');newStyle.type = "text/css";
document.getElementsByTagName('head').item(0).appendChild(newStyle);
css = document.styleSheets.item(0)
var idx = document.styleSheets[0].cssRules.length;
css.insertRule('body { opacity: 0;-ms-filter:"alpha( opacity=0 )";filter: alpha( opacity=0 ); }', idx);
</script>

これで読み込む際にbodyがopacity:0になります。(やったあとフェードインさせるのを忘れずにしましょう。)


日々勉強中ですがなかなか覚えることが多くて大変ですね・・・。
へこたれずにやっていきましょう。ちなみに仕事だからこそ勉強(要望対応)が捗るのは言うまでもありませんね。
クライアントの要望を聞き過ぎるとダメですが、程度はお互いのメリットになるものだと思っています。(若干大変だなぁとかも思ったりゲフンゲフン)

2016-11-07T02:15:19+00:002015/06/24|Categories: WEB|Tags: |

コメントする

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください