document.getElementById("someDom").style.color="#f00";

但对于已经设置了“important”属性样式的元素，这一句就起不了作用了，就必须用到另一个属性：cssText，代码如下：

document.getElementById("someDom").style.cssText="color:#f00 !important";

// 用jQuery更方便
$("#someDom").css("cssText","color:#f00 !important");

但cssText也有个缺点，它会覆盖掉以前的inline样式，可以用累加的方式得以保留原有样式。代码如下：

var elem = document.getElementById("someDom");
elem.style.cssText +=";color:#f00 !important";

注意上面的累加语句等号右侧的“;”千万不能少，因为IE的cssText属性会默认去掉最后一个“;”，所以如果累加的话一定要重新加上。

document.getElementById("i_text").onkeypress = function(e){
	var e = e || window.event, //获得事件
	k = e.which || e.keyCode; // 获得 keyCode 值
	/**
	 * 8 为退格健
	 * 0 为上、下、左、右方向健
	 * 48 为 0 健，57 为 9 健
	 * 48 到57 健分别是0,1,2,3,4,5,6,7,8,9
	 * . 点号的keyCode为 46，如果需要输入小数
	 * - 减号的keyCode为 45，如果需要输入负数
	*/
	if(k!=8 && k!=0 && (k<48 || k>57)){
		return false;
	}
}

注释代码中已经给出了，需要指出的是IE8目前只支持keyCode，IE9还没有试。如果使用jQuery那就更简单了，代码如下：

$("#i_text").bind('keypress',function(e){
	var k = e.which;
	if(k!=8 && k!=0 && (k<48 || k>57)){
		return false;
	}
});

工作中经常要对window.location进行相关的操作，在这里列出它的属性和方法，方便查找。现以链接http://julabs.me:8080/blog/front/javascript-window-location.html?author=julabs#comment为例来讲解window.location的属性：

下表列出的是window.location的方法：

function isIdCardNo(arg){
	return /(^\d{15}$)|(^\d{17}(?:\d|x|X)$)/.test(arg);
}

当然这个函数非常简单，不过能用就可以了。

演示里面展示了滑动、缩放、改变透明度共6种效果，以前这些效果必须是由JavaScript或者Flash来实现，现在完全用CSS 3和Webkit就可以轻松实现了。相信通过查看这些演示，能够让人认识和体会到CSS 3的强大。

图标的链接地址或者HTML代码出错了

这是个低级错误，但也不是不可能发生的，首先要看看图标的链接地址和HTML代码对不对。一般如果直接把favicon.ico图标放在网站的根目录下，页面是可以自动寻址到这个图标文件的。正确的代码如下：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

火狐还支持GIF动画格式的图标，代码如下：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.gif" type="image/gif" />

没有清空缓存

要清空浏览器的缓存，在IE中不仅要清空Internet临时文件，也要把历史记录清空。对于360、搜狗、傲游这些浏览器清空缓存会稍微麻烦点，它们会将favicon.ico存储在自己特定的文件夹里，以加快页面的访问速度。

360浏览器

要进入自己的Application Data中寻找360浏览器的数据，比如我的用户名为Jon。如果用的是XP，那么就找到C:\Documents and Settings\Jon\Application Data\360se\data\ico文件夹；如果是Win7，那么就找到C:\Users\Jon\AppData\Roaming\360se\data\ico文件夹。这里是360浏览器缓存网站favicon.ico的地方，把ico文件夹清空。

搜狗浏览器

同样也要找Application Data，比如我的用户名为Jon。如果用的是XP，那么就找到C:\Documents and Settings\Jon\Application Data\SogouExplorer\FavIcon文件夹；如果是Win7，那么就找到C:\Users\Jon\AppData\Roaming\SogouExplorer\FavIcon文件夹。这里是搜狗浏览器缓存网站favicon.ico的地方，把FavIcon文件夹清空。

傲游浏览器

我使用的是傲游浏览器2，把它安装到了D:\Maxthon2目录下，那么在这个目录下找到名为Favicons的文件夹，这里是傲游浏览器缓存网站favicon.ico的地方，把Favicons文件夹清空。

favicon.ico格式不对

最好使用专业的Icon制作软件，可以在《免费的图标制作工具》一文中找一些使用。要想知道自己的图标文件格式是否正确，可以先下载其它网站的Icon来对比下。比如可以下载Google的favicon.ico文件，地址为：http://www.google.com/favicon.ico。把自己的favicon.ico和Google的favicon.ico放在一起，开启文件浏览的缩略图模式。看下面的图片，可以正确显示的就是正确格式，不能显示的就是错误格式。在下图中favicon-1.ico、favicon-2.ico都能正确显示，是正确的格式，而favicon-3.ico的格式错误，显示不正确。

一般网站用的favicon.ico的尺寸为16×16就可以了，

如果通过以上的方法favicon.ico仍然显示不了，那、那、那，那我也就没有办法了。

var referrer = window.opener.location.href;

Document.Referrer由于各种原因可能会丢失，相关的原因和解决办法可以参考《Document.Referrer丢失的几个原因》一文。

下面是详细代码和注释：

/**
 * 表格排序
 */
var sortTable = {
	/**
	 * 转换函数
	 * 可以将 String 类型的变量转成 Int,Float,Date 的格式
	 * @param {String} v 原来的值
	 * @param {String} tp 值类型 int,float,date,默认为 string
	 */
	convert:function(v,tp){

		switch(tp){
			case 'int':
				return parseInt(v);
			case 'float':
				return parseFloat(v);
			case "date":
				// IE6 只认 yyyy/mm/dd hh:mm:ss的格式
				return new Date(Date.parse(v.replace(/\-/g,'/')));
			default:
				return v.toString().toLowerCase();
		}
	},

	/**
	 * 对比两个行
	 * @requires sortTable.convert
	 * @param {Int} ic 排序要参照的表格序号
	 * @param {String} dt 值类型 int,float,date,默认为 string
	 */
	compareTrs:function(ic,dt){

		/**
		 * 返回一个新的对比函数
		 * @requires sortTable.convert
		 * @param {Object} r1 第一行
		 * @param {Object} r2 第二行
		 */
		return function(r1,r2){
			var v1 , v2;
			// 如果节点拥有 data-sort 属性
			// 则根据 data-sort 属性进行排序
			if(r1.cells[ic].getAttribute('data-sort')){
				v1 = sortTable.convert(r1.cells[ic].getAttribute('data-sort'),dt);
				v2 = sortTable.convert(r2.cells[ic].getAttribute('data-sort'),dt);
			}else{
				// 如果节点没有 data-sort 属性
				// 则根据节点的 nodeValue 值进行排序
				v1 = sortTable.convert(r1.cells[ic].firstChild.nodeValue,dt);
				v2 = sortTable.convert(r2.cells[ic].firstChild.nodeValue,dt);
			}
			// 默认降序排列
			if(v1 > v2){
				return -1;
			}else if(v1 < v2){
				return 1;
			}else{
				return 0;
			}

		};
	},

	/**
	 * 表格排序函数
	 * 这个表格要有 thead 和 tbody
	 * @requires sortTable.compareTrs
	 * @param {String} tid 要排序的表格 ID
	 * @param {Int} ic 排序要参照的表格序号
	 * @param {String} tp 值类型 int,float,date,默认为 string
	 */
	sortTr:function(tid,ic,dt){
		var tb = document.getElementById(tid), // 获得表格 table
		bd = tb.tBodies[0], // 获得表格的tbody
		trs = bd.rows, // 获得表格 tbody 下的行集合
		arr = [], // 用于存储 tr 行集合的列表
		i=l=trs.length, // 获得 tr 行集合的个数
		fg = document.createDocumentFragment(), // 临时片断
		st=tb.getAttribute('data-sort');

		// 将 tr 行存储到 arr 中
		while(i--){
			arr[i] = trs[i];
		}
		// st 可能为 0 或者 NaN
		if(st!=null && (parseInt(st)==ic)){
			// 如果表格当前的排序号和 ic 相等
			// 表明已经按照这个属性排序过了
			// 反排序就可以了
			arr.reverse();
		}else{
			arr.sort(sortTable.compareTrs(ic,dt));
			tb.setAttribute('data-sort',ic);
		}

		for(i=0;i<l;i++){
			fg.appendChild(arr[i]);
		}

		bd.appendChild(fg);

		tb.setAttribute('data-sort',ic);

		tb = bd = trs = arr = i = l = fg = null;

	}
};

下面是代码的使用示例，记住要排序的表格必需拥有tbody这个元素，当点击thead里面的th时，tbody中的行就根据相应的列进行排序。注意我把触发行为的代码放在表格thead中的th里了。

<table id="oTable">
	<thead>
		<tr>
			<th onclick="sortTable.sortTr('oTable',0,'date')">时间</th>
			<th onclick="sortTable.sortTr('oTable',1,'string')">姓名</th>
			<th onclick="sortTable.sortTr('oTable',2,'int')">年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<!--td data-sort="March 12, 2001 19:25:03">2001 03 12</td-->
			<td data-sort="2001-03-12">2001 03 12</td>
			<td>jon</td>
			<td>54</td>
		</tr>
		<tr>
			<td data-sort="2001-11-12">2001 11 12</td>
			<td>amy</td>
			<td>32</td>
		</tr>
		<tr>
			<td data-sort="1983-08-16">1983 08 16</td>
			<td>tom</td>
			<td>56</td>
		</tr>
		<tr>
			<td data-sort="2007-06-14">2007 06 14</td>
			<td>jim</td>
			<td>24</td>
		</tr>
		<tr>
			<td data-sort="1998-07-16">1998 07 16</td>
			<td>Lucy</td>
			<td>18</td>
		</tr>
	</tbody>
</table>

下面是模拟IE下的mouseenter和mouseleave功能代码，里面也加上了详细的注释。

/**
 * 只在非IE中使用
 * 模拟 IE 中 mouseenter 和 mouseleave 的效果
 * @param {Event} e 发生的事件
 * @param {Function} fun 触发的行为
 */
var hover = function(e,fun){
	/**
	 * 因为这个函数只在非IE的浏览器中使用
	 * 所以可以使用 e.relatedTarget
	 * 来获得与事件的目标节点相关的节点
	 */
	var t = e.relatedTarget,

	// 获得触发此事件的节点
	t2 = e.target;

	/**
	 * 如果当前的节点与触发此事件的节点为同一节点
	 * 并且事件的目标节点不是当前节点的子节点
	 * 则触发行为
	 */
	if(this == t2 && t && !(this.compareDocumentPosition(t) == 20)){
		fun.call(this);
	}
	t = t2 = null;
}

上面的代码看似很多，但去除注释后代码就非常少了。继续说这个函数的用法，设有如下的DOM结构：

<ul id="my_id">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

样式CSS代码如下：

ul{
	width:200px;
	margin:0;
	padding:10px 0;
	background:#2883DE;
	list-style:none;
	line-height:30px;
	text-align:center;
	color:#FFF;
}
li{
	margin:10px;
	padding:0;
	background:#3728DE;
}

使用函数hover的JS代码如下：

window.onload = function(){
	var my_id = document.getElementById('my_id');

	var ul_enter = function(){
		alert('鼠标进入UL');
	}

	var ul_leave = function(){
		alert('鼠标离开UL');
	}

	/**
	 * 用 my_id.onmouseenter!==undefined 来判断
	 * 浏览器支不支持 mouseenter 和 mouseleave 的方法
	 * 注意一定要用 “!==”来判断，而不能用“!=”
	 * 在非 IE 中，my_id.onmouseenter 为 undefined
	 * 在 IE 中，my_id.onmouseenter 为 null 或者为一个 function
	 * Opera 也支持 attachEvent 方法
	 * 但是 Opera 没有 mouseenter 和 mouseleave 的功能
	 */
	if(my_id.onmouseenter!==undefined){
		my_id.attachEvent('onmouseenter',ul_enter);

		my_id.attachEvent('onmouseleave',ul_leave);
	}else{
		my_id.addEventListener('mouseover',function(e){
			//ul_enter();
			hover.call(this,e,ul_enter);
		},false);

		my_id.addEventListener('mouseout',function(e){
			//ul_leave();
			hover.call(this,e,ul_leave);
		},false);
	}

};

近期做的一个页面，要显示近200多行数据，每行数据里面有11个单元格，而每行的最后两个单元格中还嵌套有表格。这个页面突然最近两天变地非常慢，而且在IE6下尤为明显。刚开始以为是JavaScript的问题，就一直在这方面做优化。为了让页面看起来快点，我甚至用了分时分段创建DOM的做法，但情况仍然没有明显地好转。后来才发现其实创建DOM的过程是非常快的，而慢就慢在了渲染上面。我把CSS文件移除后页面变地非常快，最终在CSS文件中一句句地排查，终于找到了罪魁祸首：背景图片（background-image）。

原来设计要为每个单元格增加一个1像素的边框，并且每个单元格有固定的宽度，而加了一个边框的单元格在不同的浏览器下面它们最终的宽度就不一样。为了兼容我去掉了边框，改用了设置一像素平铺背景来模拟边框。表格有200多行，每行连子表格共有17个单元格，合在一起有3,4000个单元格，每个单元格都有平铺的小背景，不慢才怪！

这件事给我的教训很大，以前对CSS的认识不足，只关注JavaScript，现在要重新认识CSS了。

《高性能网站建设进阶指南》中给出了几条编写高效CSS选择符的要点：

• 避免使用通配符：除了传统意义上的通配选择符外，Hyatt把相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到了“通配符”分类下，他仅推荐使用ID、类、和标签选择符。
• 不要限定ID选择符；对于div#idsel这样的选择符，应该改成#idsel，因为在页面里一个指定的ID只能对应一个元素，没有必要再添加其它限定符。
• 不要限定类选择符：不要用具体的限定类选择符，如li.mystyle，改成.list-mystyle会更好些
• 让规则越具体越好：如ul li a这样的，最好是创建一个像.list-link这样的类。
• 避免使用后代选择符：通常使用后代选择符的开销是最高的，在有条件的情况下可以用子选择符代替。这一条对IE6无用，IE6不支持子选择符。
• 避免使用标签和子选择符：如果有像#myid > li > a这样的选择符，可以改成一个类，如.myid-link。
• 质疑子选择符的所有用途：再次提醒检查所有使用子选择符的地方，然后尽可能用具体的类取代它。
• 依靠继承：了解哪些属性可能通过继承来获取，避免对这些属性重复指定规则，可以参考《Full property table》。

这些要点有很多不现实的地方，因为子选择符在实际操作中是必须要用到的，但是我们可以在达到效果的基础上利用这些要点来优化CSS代码。

这里有两篇Jon Sykes的文章，里面列出了不同规则对于渲染速度的影响，可以参考下：

• Testing CSS Performance
• Testing CSS Performance (pt 2)

此外，还在网上收集了一些CSS优化的规则，也列出来：

• 十六进制的颜色值对位数与大小写：建议用#FFFFFF，而不要用简写#fff，因为十六进制的颜色值默认标准是大写及6位数标注，在未知情况下不希望冒险而降低了渲染的效率。
• 用display与visibility隐藏的差异：建议用display:none来隐藏元素，display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
• border:none;与border:0;的区别：建议用border:none;，和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
• 不宜过小的背景图片平铺：不赞成宽高8px以下的平铺背景图片。
• IE的滤镜：不建议使用IE的滤镜，不仅消耗资源，也有兼容问题。