用图片的方式制作引用块(Blockquote)效果

我们在发布文章时经常要引用他人的观点,为了更好的区分正文和引用文字,我们需要给引用文字赋予不同的样式,本文就是介绍一种让文章中出现的引用文字更加形象的方法。

用图片的方式制作引用块(Blockquote)效果 – 示例

 
<style type="text/css">
 
blockquote {
	background: transparent url(quoleft.gif) left top no-repeat;
}
 
blockquote div {
	padding: 0 40px;
	background: transparent url(quoright.gif) right bottom no-repeat;
}
 
</style>
 
<blockquote cite="http://www.CodeBit.cn">
	<div>
	在编程的过程中,我们通常都会积累很多简单、有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。
	</div>
</blockquote>

我们在 blockquote 下面加了一个 div 标签,然后为各自定义一个背景图片,设置好 padding 即可实现引用块(Blockquote)效果。

用 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 则直接返回规则中的属性值,但这些并不影响应用。

Javascript 切换页面 CSS 样式

越来越多的网站制作者期望为自己的网站设计多种风格,以便访问者能够选择自己喜欢的样式进行浏览,本文介绍的就是一个切换页面样式的解决方案。

Javascript 切换页面 CSS 样式 – 示例

 
// 说明:Javascript 切换页面 CSS 样式
// 整理:http://www.CodeBit.cn

function setActiveStyleSheet(title) {
	var i, a, main;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
			a.disabled = true;
			if(a.getAttribute("title") == title) a.disabled = false;
		}
	}
}

function getActiveStyleSheet() {
	var i, a;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
	}
	return null;
}

function getPreferredStyleSheet() {
	var i, a;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if(a.getAttribute("rel").indexOf("style") != -1
			&& a.getAttribute("rel").indexOf("alt") == -1
			&& a.getAttribute("title")
		) return a.getAttribute("title");
	}
	return null;
}

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

window.onload = function(e) {
	var cookie = readCookie("style");
	var title = cookie ? cookie : getPreferredStyleSheet();
	setActiveStyleSheet(title);
}

window.onunload = function(e) {
	var title = getActiveStyleSheet();
	createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

css 标签调用方式:

 
<link rel="stylesheet" type="text/css" href="css/white.css" title="white" />
<link rel="alternate stylesheet" type="text/css" href="css/black.css" title="black" />

切换方式:

 
<a href="#" onclick="setActiveStyleSheet('white'); return false;">白色背景</a>

<a href="#" onclick="setActiveStyleSheet('black'); return false;">黑色背景</a>