2018/12/19更新

[JavaScript] JSからhtmlタグやbodyタグにアクセスする

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
フロント実装している際に、<html><body>にJavaScriptからアクセスする実装をしたので、ブログにも記載したいと思います。



htmlタグにアクセスする

htmlタグへアクセスするには、以下のように実装します。
// 素のJavaScriptの場合
var html = document.documentElement;

// 例えばスタイルを設定してみる.
html.style.backgroundColor = 'red';
ここではdocument.documentElementで、<html>にアクセスしています。

jQueryの場合は、以下のように行います。
// jQueryの場合
var $html = $('html');

// 例えばスタイルを設定してみる.
$html.css('backgroundColor', 'red');
jQueryだと直感的ですね。



bodyタグにアクセスする

bodyタグへアクセスするには、以下のように実装します。
// 素のJavaScriptの場合
var body = document.body;

// 例えばスタイルを設定してみる.
body.style.backgroundColor = 'red';
ここではdocument.bodyという変数がポイントです。

jQueryの場合は、以下のように行います。
// jQueryの場合
var $body = $('body');

// 例えばスタイルを設定してみる.
$body.css('backgroundColor', 'red');
jQueryだと、bodyタグの場合も直感的ですね。



最後に

今日はライトなネタですが、ちょっとしたTipsになればなと思います。jQueryを使わずにサイト構築することも多いので、素のJavaScript(Vanilla JSと言われています)で、色々とできるようになると素敵です。

余談ですが、Vanilla JS(バニラJS)は、アイスクリームのバニラ味の意味で、ソースなど何もかかっていない(つまり「素」である)ことから、そう言われているようです。

最後になりますが本ブログでは、フロントエンド、Python、PHP、サーバー、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。