通过 Javascript 实现的 CSS 浏览器选择符(CSS Browser Selector)

CSS 在不同浏览器下的最终显示效果是不同的,因此,出现了很多根据不同浏览器作相应处理的 HACK 技术,本文介绍的是通过 Javascript 检测浏览器和操作平台类型,然后设置特定选择符。设置样式时,通过 CSS 的包含选择符,我们很容易就能根据不同浏览器作出不同处理。

通过 Javascript 实现的 CSS 浏览器选择符(CSS Browser Selector) – 示例

 
<script type="text/javascript">
// 说明 : 通过 Javascript 实现的 CSS 浏览器选择符(CSS Browser Selector)
// 整理 : CodeBit.cn ( http://www.codebit.cn )
 
// CSS Browser Selector   v0.2.5
// Documentation:         http://rafael.adm.br/css_browser_selector
// License:               http://creativecommons.org/licenses/by/2.5/
// Author:                Rafael Lima (http://rafael.adm.br)
// Contributors:          http://rafael.adm.br/css_browser_selector#contributors
var css_browser_selector = function() {
	var 
		ua=navigator.userAgent.toLowerCase(),
		is=function(t){ return ua.indexOf(t) != -1; },
		h=document.getElementsByTagName('html')[0],
		b=(!(/opera|webtv/i.test(ua))&&/msie (d)/.test(ua))?('ie ie'+RegExp.$1):is('gecko/')? 'gecko':is('opera/9')?'opera opera9':/opera (d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'',
		os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';
	var c=b+os+' js';
	h.className += h.className?' '+c:c;
}();
</script>

其原理是:先用 js 检测浏览器类型和操作系统平台,然后给最高节点 “HTML” 赋上对应的 class ,然后在设置样式时,我们就可以通过 css 的包含选择符,根据不同浏览器作出不同处理了。

用 javascript 获取页面上有选择符的 CSS 规则

本文介绍的方法可以返回页面上有选择符的 CSS 规则,支持 <link /> 标签和页面内部 <style></style> 样式块,可以返回指定选择符下指定属性的值。

用 javascript 获取页面上有选择符的 CSS 规则 – 示例

 
<script type="text/javascript">
/* ###################################################
 * 说明:用 javascript 获取页面上有选择符的 CSS 规则
 *       包括'内部样式块'和'外部样式表文件'
 * 作者:Yanfu Xie [xieyanfu@yahoo.com.cn]
 * 网址:http://www.CodeBit.cn
 * 日期:2007.01.16
 * #################################################*/
function getCssRule()
{
	// 样式总数
	var styleSheetLen = document.styleSheets.length;
 
	if(!styleSheetLen) return;
 
	// 样式规则名称,IE 和 FireFox 不同
	var ruleName = (document.styleSheets[0].cssRules)?'cssRules':'rules'; //FireFox:cssRules || IE:rules
 
	// 初始结果
	var result = {};
 
	var totalRuleLen = 0;
 
	var totalSelectorLen = 0;
 
	var totalProperty = 0;
 
	for(var i=0; i<styleSheetLen; i++)
	{
		// 获取每个样式表定义
		var styleSheet = document.styleSheets[i];
 
		// 每个样式表的规则数
		var ruleLen = styleSheet[ruleName].length;
 
		totalRuleLen += ruleLen;
 
		for(var j=0; j<ruleLen; j++)
		{
			// 获取当前规则的选择符
			// 传入选择符转换为小写
			var selectors = styleSheet[ruleName][j].selectorText.toLowerCase().split(",");
 
			var selectorLen = selectors.length;
 
			totalSelectorLen += selectorLen;
 
			for(var s=0; s<selectorLen; s++)
			{
				// 去除选择符左右的空格
				selector = selectors[s].replace(/(^s*)|(s*$)/g, "");
 
				// 初始化当前选择符
				result[selector] = {};
 
				// 获取当前样式
				var styleSet = styleSheet[ruleName][j].style;
 
				for (property in styleSet)
				{
					// 获取规则
					if(styleSet[property] && property != 'cssText')
					{
						//alert(selector +'=>'+ property +':'+ styleSet[property])
						result[selector][property] = styleSet[property];
 
						totalProperty += 1;
					}
				}
			}
		}
	}
 
	// 统计数据
	result.totalSheet = styleSheetLen;	//样式块
	result.totalRule = totalRuleLen;	//规则数
	result.totalSelector = totalSelectorLen;	//选择符
	result.totalProperty = totalProperty;	//属性
 
	return result;
}
</script>

用法示例:

 
<link rel="stylesheet" type="text/css" href="test.css"  />
 
<style type="text/css">
a.Code, a.Test {
	color:#fff;
	background:#eee;
}
.class {
	border-top:1px solid #eee;
}
</style>
 
<script language="JavaScript" type="text/javascript">
 
// 获取规则
var css = getCssRule();
 
// 获取指定选择符下面的 CSS 属性值
// selector:选择符(小写)
// attribute:查询的 CSS 属性,脚本模式(如:background-color 为 backgroundColor)
function getCssValue(selector, attribute)
{
	return (css[selector])?(css[selector][attribute])?css[selector][attribute]:false:false;
}
 
document.write("<strong>统计数据</strong> <br />");
document.write(css.totalSheet + " 个 CSS 样式块(包括&lt;link /&gt;标签和&lt;style&gt;&lt;/style&gt;样式块) <br />");
document.write(css.totalRule + " 条规则(FireFox 下分组选择符如:body, form, p {} 算一条, IE 将分开计算) <br />");
document.write(css.totalSelector + " 个选择符(将分组选择符分开计算) <br />");
document.write(css.totalProperty + " 条 CSS 属性(如:border:1px solid #eee;) <br /><br />");
 
// 传入选择符为小写,属性为脚本模式
document.write("<strong>选择符为 'a.test' 的背景颜色(backgroundColor) 为:</strong> <br />");
document.write("<strong>语法:</strong>getCssValue('a.test', 'backgroundColor'); <br />");
document.write("<strong>结果:</strong>" + getCssValue('a.test', 'backgroundColor') + "<br />");
document.write("IE 直接返回属性值,但 FireFox 返回 RGB 值");
 
</script>

IE 和 FireFox 将自动添加一些规则,比如你只定义 border:1px solid #eee; 它们会自动添加 borderTop, borderBottom, borderLeft, borderRight 的值,在返回值上两个浏览器的处理方法也不同,比如颜色,FireFox 会返回 RGB 格式的颜色值,而 IE 则直接返回规则中的属性值,但这些并不影响应用。