イベントでstyleを変更するjavascript

kFlyOutDiv

私、何かjavascript書いて公開しようかなと思いまして…
何にしようかなーと考えまして…
最近はonloadに反応してstyleが変更されるようなアニメーションするエフェクトが多いから、「よしっ!汎用的に使えるstyleを変更するjavascriptでも書こう!」
「クラス名を設定したタグの独自属性に変更後のスタイルを書けば変更するみたいな…」
「OK!ナイスアイディア!」

って思って、書いてはみたんだけど、、、そういえば別にいちいちHTMLに変更後のスタイルかかなくてもjavascriptでクラス名替えるだけでいいじゃんって…
書き終わってから気づいたから…
せっかく書いたんで一応公開します。

「クラスは絶対に替えたくないんだ‐!!」って人居るかもしれないし…(・Θ・;)

class名変更したりするもうちょっといい感じのバージョンも後ほど書きますね~。。。
書きました:windowをスクロールして対象が画面内に入ったらclassを変更するjavascript

超簡単なサンプル

サンプル:イベントでstyleを変更するjavascript

使い方

ターゲットにclass="k_fly_out_div"をつける

何個でもOKなのでとりあえずスタイルを変更するDIVとかにclass="k_fly_out_div"をつけてください

ターゲットにdata-kfod-end-style=""を追加

ターゲットに独自属性を付けて、変更後のスタイルを書いていってください。
変更前のスタイルはどっか別のとこに書いといてくださいね

ターゲットにdata-kfod-end-timer=""をつける

イベントが発生するタイミングをミリ秒で書いてください。onloadから1000ミリ秒とかそんな感じ

スクリプトを読み込んでください。

下記のスクリプトをどこかで読み込んで下さい。
ターゲットが読み込まれた後に読み込むか
DOMContentLoadedとかのイベントに登録するか
jQueryのreadyの中に書くか、とりあえずDOMが用意されてから読み込んでくださいね。
下記はDOMContentLoadedで登録してます。

ターゲットはこんな感じ
<div class="k_fly_out_div" style="background-color:red;color:#fff;transition:all 0.3s ease-out 0ms;position:absolute;top:0px;opacity:0.1" data-kfod-end-timer="1000" data-kfod-end-style="background-color:blue;top:20px;padding:10px;opacity:1">変化するやーつー</div>
読み込むスクリプト
(function (doc) {
	doc.addEventListener('DOMContentLoaded', function () {
	//今回はDOMContentLoadedで実行
	
		kFlyOutDiv();//ここはターゲットが読み終わってから読んでね
		
		function kFlyOutDiv () {
			var reg = new RegExp('(^| +)k_fly_out_div($| +)'),
					nodeList = [],
					el = document.getElementsByTagName('*');
			for (var i = 0; i < el.length; i++) {
				if (reg.test(el[i].className)){
					nodeList.push(el[i]);
				}
			}
			for (var i = 0, max = nodeList.length; i < max; i++) {
				var end_styles = nodeList[i].getAttribute("data-kfod-end-style"),
						end_timer = nodeList[i].getAttribute("data-kfod-end-timer");
				
				if (end_styles !== null) {
					if (end_styles.slice(-1) ===';') end_styles = end_styles.substr( 0 , (end_styles.length-1) );
					end_styles = end_styles.split(";");
					(function(node_, end_styles_, end_timer_) {
						setTimeout(function() {
							for (var j = 0, max = end_styles_.length; j < max; j++) {
								var end_style = end_styles_[j].split(":");
								end_style[0] = end_style[0].replace(/\-(\w)/g, function (m, c) {
									return c.toUpperCase();
								});
								node_.style[end_style[0]] = end_style[1];
							}
						}, end_timer_);
					}(nodeList[i], end_styles, end_timer));
				}
			}
		}
		
	}, false);
}(document));

最後に

何かスクリプトを公開しようかなって書いてみても、「あれ、こうやればいいじゃん」とか書いているうちに思いついたりするんですよね~。
まあでもこういうものをたくさん書いて少しずつ面白いものを書いていきたいなと思っています。

モバイルバージョンを終了