准确获取指定元素 CSS 属性值

当处理 DOM 元素的 CSS 属性时,我们经常会遇到一个问题:明明页面上已经定义了 CSS 属性值,但在获取的时候却为空,这是因为任何样式表文件或内联 CSS 预设的样式信息并不能可靠地反映到 style 属性上,本文向你介绍准确获取指定元素 CSS 属性值的方法。

准确获取指定元素 CSS 属性值 – 示例

 
<script type="text/javascript">
 
// 说明:准确获取指定元素 CSS 属性值
// 作者:John Resig 《Pro JavaScript Techniques》
// 来源:http://bbs.blueidea.com/viewthread.php?tid=2745446
// 整理:CodeBit.cn ( http://www.CodeBit.cn )
 
function getStyle( elem, name )
{
	//如果该属性存在于style[]中,则它最近被设置过(且就是当前的)
	if (elem.style[name])
	{
		return elem.style[name];
	}
 
	//否则,尝试IE的方式
	else if (elem.currentStyle)
	{
		return elem.currentStyle[name];
	}
 
	//或者W3C的方法,如果存在的话
	else if (document.defaultView && document.defaultView.getComputedStyle)
	{
		//它使用传统的"text-Align"风格的规则书写方式,而不是"textAlign"
		name = name.replace(/([A-Z])/g,"-$1");
		name = name.toLowerCase();
 
		//获取style对象并取得属性的值(如果存在的话)
		var s = document.defaultView.getComputedStyle(elem,"");
		return s && s.getPropertyValue(name);
 
	//否则,就是在使用其它的浏览器
	}
	else
	{
		return null;
	}
}
 
</script>

本文摘录自 John Resig 的《Pro Javascript Techniques》
蓝色 mozart0 版主发布了中文翻译:
http://bbs.blueidea.com/viewthread.php?tid=2733371

用 Javascript 获取指定页面元素的位置

用 Javascript 获取指定页面元素的位置是一个非常常见的需求,本文介绍的方法能够准确返回一个元素相对于整个文档左上角的坐标,即元素的 top 、left 的位置,而且能够兼容浏览器,相信对新手非常有用。

用 Javascript 获取指定页面元素的位置 – 示例

 
<script language="JavaScript" type="text/javascript">
<!--
 
// 说明:用 Javascript 获取指定页面元素的位置
// 整理:http://www.codebit.cn
// 来源:YUI DOM
 
function getElementPos(elementId) {
 
	var ua = navigator.userAgent.toLowerCase();
	var isOpera = (ua.indexOf('opera') != -1);
	var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
 
	var el = document.getElementById(elementId);
 
	if(el.parentNode === null || el.style.display == 'none') 
	{
		return false;
	}
 
	var parent = null;
	var pos = [];
	var box;
 
	if(el.getBoundingClientRect)	//IE
	{
		box = el.getBoundingClientRect();
		var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
		var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
 
		return {x:box.left + scrollLeft, y:box.top + scrollTop};
	}
	else if(document.getBoxObjectFor)	// gecko
	{
		box = document.getBoxObjectFor(el);
		   
		var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
		var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
 
		pos = [box.x - borderLeft, box.y - borderTop];
	}
	else	// safari & opera
	{
		pos = [el.offsetLeft, el.offsetTop];
		parent = el.offsetParent;
		if (parent != el) {
			while (parent) {
				pos[0] += parent.offsetLeft;
				pos[1] += parent.offsetTop;
				parent = parent.offsetParent;
			}
		}
		if (ua.indexOf('opera') != -1 
			|| ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) 
		{
				pos[0] -= document.body.offsetLeft;
				pos[1] -= document.body.offsetTop;
		} 
	}
		
	if (el.parentNode) { parent = el.parentNode; }
	else { parent = null; }
  
	while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') 
	{ // account for any scrolled ancestors
		pos[0] -= parent.scrollLeft;
		pos[1] -= parent.scrollTop;
  
		if (parent.parentNode) { parent = parent.parentNode; } 
		else { parent = null; }
	}
	return {x:pos[0], y:pos[1]};
}
 
//-->
</script>

javascript 让所有页面内容都有淡入淡出效果

关于淡入淡出效果的实现,本站已经有文章介绍过,而本文介绍的是通过 javascript ,让所有的页面内容(可以设置背景色的元素)都能有淡入淡出效果,而我们需要做的只是给需要效果的元素设置ID和 className 。按照一定规则,你可以随意定义淡入淡出的颜色。

javascript 让所有页面内容都有淡入淡出效果 – 示例

 
<script type="text/javascript">
<!--
// 说明:用 javascript 让所有页面内容都有淡入淡出效果
// 整理:http://www.codebit.cn
 
// @name      The Fade Anything Technique
// @namespace http://www.axentric.com/aside/fat/
// @version   1.0-RC1
// @author    Adam Michela
 
var Fat = {
	make_hex : function (r,g,b) 
	{
		r = r.toString(16); if (r.length == 1) r = '0' + r;
		g = g.toString(16); if (g.length == 1) g = '0' + g;
		b = b.toString(16); if (b.length == 1) b = '0' + b;
		return "#" + r + g + b;
	},
	fade_all : function ()
	{
		var a = document.getElementsByTagName("*");
		for (var i = 0; i < a.length; i++) 
		{
			var o = a[i];
			var r = /fade-?(w{3,6})?/.exec(o.className);
			if (r)
			{
				if (!r[1]) r[1] = "";
				if (o.id) Fat.fade_element(o.id,null,null,"#"+r[1]);
			}
		}
	},
	fade_element : function (id, fps, duration, from, to) 
	{
		if (!fps) fps = 30;
		if (!duration) duration = 3000;
		if (!from || from=="#") from = "#FFFF33";
		if (!to) to = this.get_bgcolor(id);
		
		var frames = Math.round(fps * (duration / 1000));
		var interval = duration / frames;
		var delay = interval;
		var frame = 0;
		
		if (from.length < 7) from += from.substr(1,3);
		if (to.length < 7) to += to.substr(1,3);
		
		var rf = parseInt(from.substr(1,2),16);
		var gf = parseInt(from.substr(3,2),16);
		var bf = parseInt(from.substr(5,2),16);
		var rt = parseInt(to.substr(1,2),16);
		var gt = parseInt(to.substr(3,2),16);
		var bt = parseInt(to.substr(5,2),16);
		
		var r,g,b,h;
		while (frame < frames)
		{
			r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
			g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
			b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
			h = this.make_hex(r,g,b);
		
			setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay);
 
			frame++;
			delay = interval * frame; 
		}
		setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay);
	},
	set_bgcolor : function (id, c)
	{
		var o = document.getElementById(id);
		o.style.backgroundColor = c;
	},
	get_bgcolor : function (id)
	{
		var o = document.getElementById(id);
		while(o)
		{
			var c;
			if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
			if (o.currentStyle) c = o.currentStyle.backgroundColor;
			if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
			o = o.parentNode;
		}
		if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
		var rgb = c.match(/rgbs*(s*(d{1,3})s*,s*(d{1,3})s*,s*(d{1,3})s*)/);
		if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
		return c;
	}
}
 
window.onload = function () {
	Fat.fade_all();
}
//-->
</script>

给你希望有淡入淡出效果的元素设置一个值为 fade 的 className,如:class="fade",默认的淡入淡出颜色是 #FFFF33,如果你想用其他颜色,只需要在 className 后面加上 "-你期望的颜色",如:class="fade-0000FF",这样的话,淡入淡出的颜色就是蓝色,是不是很方便?注意,元素一定要有 ID !