sample

動作サンプル：イベントでstyleを変更するjavascript

Posted on by 大窪 将弘
ああああああああああああああ
いいいいいいいいいいいいいいいいいい

詳しくはコチラ

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

こんなふうに書いた時

ターゲットはこんな感じ
<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));

著者

kurubusi.net