CSS中文字体对照表

css字体名可以使用2种Unicode格式,以“微软雅黑”为例: 微软雅黑 和 \5FAE\8F6F\96C5\9ED1,如果未找到需要的字体名称,可以到这里把简体中文转换为Unicode编码。

另外注意:繁体中文字体名,在简体中文系统中是不能被识别的。

中文名 英文名 Unicode Unicode 2
Mac OS
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑
华文黑体 STHeiti \534E\6587\9ED1\4F53 华文黑体
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro 丽黑 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro 丽宋 Pro
标楷体 BiauKai \6807\6977\4F53 标楷体
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1 苹果丽中黑
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B 苹果丽细宋
Windows
新细明体 PMingLiU \65B0\7EC6\660E\4F53 新细明体
细明体 MingLiU \7EC6\660E\4F53 细明体
标楷体 DFKai-SB \6807\6977\4F53 标楷体
黑体 SimHei \9ED1\4F53 黑体
宋体 SimSun \5B8B\4F53 宋体
新宋体 NSimSun \65B0\5B8B\4F53 新宋体
仿宋 FangSong \4EFF\5B8B 仿宋
楷体 KaiTi \6977\4F53 楷体
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312 仿宋_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 楷体_GB2312
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 微软正黑体
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软雅黑
Office
隶书 LiSu \96B6\4E66 隶书
幼圆 YouYuan \5E7C\5706 幼圆
华文细黑 STXihei \534E\6587\7EC6\9ED1 华文细黑
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文中宋 STZhongsong \534E\6587\4E2D\5B8B 华文中宋
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
方正舒体 FZShuTi \65B9\6B63\8212\4F53 方正舒体
方正姚体 FZYaoti \65B9\6B63\59DA\4F53 方正姚体
华文彩云 STCaiyun \534E\6587\5F69\4E91 华文彩云
华文琥珀 STHupo \534E\6587\7425\73C0 华文琥珀
华文隶书 STLiti \534E\6587\96B6\4E66 华文隶书
华文行楷 STXingkai \534E\6587\884C\6977 华文行楷
华文新魏 STXinwei \534E\6587\65B0\9B4F 华文新魏

CSS3 选择器

css选择器:http://unicac.sinaapp.com/CSS/css%E9%80%89%E6%8B%A9%E5%99%A8.html

@w3cplus

CSS3选择器

CSS颜色名称实例

名称 16进制 百分值 整数值 16进制缩写 DEMO
aliceblue #f0f8ff rgb(94.1%,96.9%,100%) rgb(240,248,255)  
antiquewhite #faebd7 rgb(98%,92.2%,84.3%) rgb(250,235,215)  
aqua #00ffff rgb(0%,100%,100%) rgb(0,255,255) #0ff
aquamarine #7fffd4 rgb(49.8%,100%,83.1%) rgb(127,255,212)  
azure #f0ffff rgb(94.1%,100%,100%) rgb(240,255,255)  
beige #f5f5dc rgb(96.1%,96.1%,86.3%) rgb(245,245,220)  
bisque #ffe4c4 rgb(100%,89.4%,76.9%) rgb(255,228,196)  
black #000000 rgb(0%,0%,0%) rgb(0,0,0) #000
blanchedalmond #ffebcd rgb(100%,92.2%,80.4%) rgb(255,235,205)  
blue #0000ff rgb(0%,0%,100%) rgb(0,0,255) #00f
blueviolet #8a2be2 rgb(54.1%,16.9%,88.6%) rgb(138,43,226)  
brown #a52a2a rgb(64.7%,16.5%,16.5%) rgb(165,42,42)  
burlywood #deb887 rgb(87.1%,72.2%,52.9%) rgb(222,184,135)  
cadetblue #5f9ea0 rgb(37.3%,62%,62.7%) rgb(95,158,160)  
chartreuse #7fff00 rgb(49.8%,100%,0%) rgb(127,255,0)  
chocolate #d2691e rgb(82.4%,41.1%,11.8%) rgb(210,105,30)  
coral #ff7f50 rgb(100%,49.8%,31.4%) rgb(255,127,80)  
cornflowerblue #6495ed rgb(39.2%,58.4%,92.9%) rgb(100,149,237)  
cornsilk #fff8dc rgb(100%,97.3%,86.3%) rgb(255,248,220)  
crimson #dc143c rgb(86.3%,7.8%,23.5%) rgb(220,20,60)  
cyan #00ffff rgb(0%,100%,100%) rgb(0,255,255) #0ff
darkblue #00008b rgb(0%,0%,54.5%) rgb(0,0,139)  
darkcyan #008b8b rgb(0%,54.5%,54.5%) rgb(0,139,139)  
darkgoldenrod #b8860b rgb(72.2%,52.5%,4.3%) rgb(184,134,11)  
darkgray #a9a9a9 rgb(66.3%,66.3%,66.3%) rgb(169,169,169)  
darkgreen #006400 rgb(0%,39.2%,0%) rgb(0,100,0)  
darkgrey #a9a9a9 rgb(66.3%,66.3%,66.3%) rgb(169,169,169)  
darkkhaki #bdb76b rgb(74.1%,71.8%,42%) rgb(189,183,107)  
darkmagenta #8b008b rgb(54.5%,0%,54.5%) rgb(139,0,139)  
darkolivegreen #556b2f rgb(33.3%,42%,18.4%) rgb(85,107,47)  
darkorange #ff8c00 rgb(100%,54.9%,0%) rgb(255,140,0)  
darkorchid #9932cc rgb(60%,19.6%,80%) rgb(153,50,204)  
darkred #8b0000 rgb(54.5%,0%,0%) rgb(139,0,0)  
darksalmon #e9967a rgb(91.4%,58.8%,47.8%) rgb(233,150,122)  
darkseagreen #8fbc8f rgb(56.1%,73.7%,56.1%) rgb(143,188,143)  
darkslateblue #483d8b rgb(28.2%,23.9%,54.5%) rgb(72,61,139)  
darkslategray #2f4f4f rgb(18.4%,31%,31%) rgb(47,79,79)  
darkslategrey #2f4f4f rgb(18.4%,31%,31%) rgb(47,79,79)  
darkturquoise #00ced1 rgb(0%,80.8%,82%) rgb(0,206,209)  
darkviolet #9400d3 rgb(58%,0%,82.7%) rgb(148,0,211)  
deeppink #ff1493 rgb(100%,7.8%,57.6%) rgb(255,20,147)  
deepskyblue #00bfff rgb(0%,74.9%,100%) rgb(0,191,255)  
dimgray #696969 rgb(41.1%,41.1%,41.1%) rgb(105,105,105)  
dimgrey #696969 rgb(41.1%,41.1%,41.1%) rgb(105,105,105)  
dodgerblue #1e90ff rgb(11.8%,56.5%,100%) rgb(30,144,255)  
firebrick #b22222 rgb(69.8%,13.3%,13.3%) rgb(178,34,34)  
floralwhite #fffaf0 rgb(100%,98%,94.1%) rgb(255,250,240)  
forestgreen #228b22 rgb(13.3%,54.5%,13.3%) rgb(34,139,34)  
fuchsia #ff00ff rgb(100%,0%,100%) rgb(255,0,255) #f0f
gainsboro #dcdcdc rgb(86.3%,86.3%,86.3%) rgb(220,220,220)  
ghostwhite #f8f8ff rgb(97.3%,97.3%,100%) rgb(248,248,255)  
gold #ffd700 rgb(100%,84.3%,0%) rgb(255,215,0)  
goldenrod #daa520 rgb(85.5%,64.7%,12.5%) rgb(218,165,32)  
gray #808080 rgb(50.2%,50.2%,50.2%) rgb(128,128,128)  
green #008000 rgb(0%,50.2%,0%) rgb(0,128,0)  
greenyellow #adff2f rgb(67.8%,100%,18.4%) rgb(173,255,47)  
grey #808080 rgb(50.2%,50.2%,50.2%) rgb(128,128,128)  
honeydew #f0fff0 rgb(94.1%,100%,94.1%) rgb(240,255,240)  
hotpink #ff69b4 rgb(100%,41.1%,70.6%) rgb(255,105,180)  
indianred #cd5c5c rgb(80.4%,36%,36%) rgb(205,92,92)  
indigo #4b0082 rgb(29.4%,0%,51%) rgb(75,0,130)  
ivory #fffff0 rgb(100%,100%,94.1%) rgb(255,255,240)  
khaki #f0e68c rgb(94.1%,90.2%,54.9%) rgb(240,230,140)  
lavender #e6e6fa rgb(90.2%,90.2%,98%) rgb(230,230,250)  
lavenderblush #fff0f5 rgb(100%,94.1%,96.1%) rgb(255,240,245)  
lawngreen #7cfc00 rgb(48.6%,98.8%,0%) rgb(124,252,0)  
lemonchiffon #fffacd rgb(100%,98%,80.4%) rgb(255,250,205)  
lightblue #add8e6 rgb(67.8%,84.7%,90.2%) rgb(173,216,230)  
lightcoral #f08080 rgb(94.1%,50.2%,50.2%) rgb(240,128,128)  
lightcyan #e0ffff rgb(87.8%,100%,100%) rgb(224,255,255)  
lightgoldenrodyellow #fafad2 rgb(98%,98%,82.4%) rgb(250,250,210)  
lightgray #d3d3d3 rgb(82.7%,82.7%,82.7%) rgb(211,211,211)  
lightgreen #90ee90 rgb(56.5%,93.3%,56.5%) rgb(144,238,144)  
lightgrey #d3d3d3 rgb(82.7%,82.7%,82.7%) rgb(211,211,211)  
lightpink #ffb6c1 rgb(100%,71.4%,75.7%) rgb(255,182,193)  
lightsalmon #ffa07a rgb(100%,62.7%,47.8%) rgb(255,160,122)  
lightseagreen #20b2aa rgb(12.5%,69.8%,66.7%) rgb(32,178,170)  
lightskyblue #87cefa rgb(52.9%,80.8%,98%) rgb(135,206,250)  
lightslategray #778899 rgb(46.7%,53.3%,60%) rgb(119,136,153) #789
lightslategrey #778899 rgb(46.7%,53.3%,60%) rgb(119,136,153) #789
lightsteelblue #b0c4de rgb(69%,76.9%,87.1%) rgb(176,196,222)  
lightyellow #ffffe0 rgb(100%,100%,87.8%) rgb(255,255,224)  
lime #00ff00 rgb(0%,100%,0%) rgb(0,255,0) #0f0
limegreen #32cd32 rgb(19.6%,80.4%,19.6%) rgb(50,205,50)  
linen #faf0e6 rgb(98%,94.1%,90.2%) rgb(250,240,230)  
magenta #ff00ff rgb(100%,0%,100%) rgb(255,0,255) #f0f
maroon #800000 rgb(50.2%,0%,0%) rgb(128,0,0)  
mediumaquamarine #66cdaa rgb(40%,80.4%,66.7%) rgb(102,205,170)  
mediumblue #0000cd rgb(0%,0%,80.4%) rgb(0,0,205)  
mediumorchid #ba55d3 rgb(72.9%,33.3%,82.7%) rgb(186,85,211)  
mediumpurple #9370db rgb(57.6%,43.9%,85.9%) rgb(147,112,219)  
mediumseagreen #3cb371 rgb(23.5%,70.2%,44.3%) rgb(60,179,113)  
mediumslateblue #7b68ee rgb(48.2%,40.8%,93.3%) rgb(123,104,238)  
mediumspringgreen #00fa9a rgb(0%,98%,60.4%) rgb(0,250,154)  
mediumturquoise #48d1cc rgb(28.2%,82%,80%) rgb(72,209,204)  
mediumvioletred #c71585 rgb(78%,8.2%,52.2%) rgb(199,21,133)  
midnightblue #191970 rgb(9.8%,9.8%,43.9%) rgb(25,25,112)  
mintcream #f5fffa rgb(96.1%,100%,98%) rgb(245,255,250)  
mistyrose #ffe4e1 rgb(100%,89.4%,88.2%) rgb(255,228,225)  
moccasin #ffe4b5 rgb(100%,89.4%,71%) rgb(255,228,181)  
navajowhite #ffdead rgb(100%,87.1%,67.8%) rgb(255,222,173)  
navy #000080 rgb(0%,0%,50.2%) rgb(0,0,128)  
oldlace #fdf5e6 rgb(99.2%,96.1%,90.2%) rgb(253,245,230)  
olive #808000 rgb(50.2%,50.2%,0%) rgb(128,128,0)  
olivedrab #6b8e23 rgb(42%,55.7%,13.7%) rgb(107,142,35)  
orange #ffa500 rgb(100%,64.7%,0%) rgb(255,165,0)  
orangered #ff4500 rgb(100%,27.1%,0%) rgb(255,69,0)  
orchid #da70d6 rgb(85.5%,43.9%,83.9%) rgb(218,112,214)  
palegoldenrod #eee8aa rgb(93.3%,91%,66.7%) rgb(238,232,170)  
palegreen #98fb98 rgb(59.6%,98.4%,59.6%) rgb(152,251,152)  
paleturquoise #afeeee rgb(68.6%,93.3%,93.3%) rgb(175,238,238)  
palevioletred #db7093 rgb(85.9%,43.9%,57.6%) rgb(219,112,147)  
papayawhip #ffefd5 rgb(100%,93.7%,83.5%) rgb(255,239,213)  
peachpuff #ffdab9 rgb(100%,85.5%,72.5%) rgb(255,218,185)  
peru #cd853f rgb(80.4%,52.2%,24.7%) rgb(205,133,63)  
pink #ffc0cb rgb(100%,75.3%,79.6%) rgb(255,192,203)  
plum #dda0dd rgb(86.7%,62.7%,86.7%) rgb(221,160,221)  
powderblue #b0e0e6 rgb(69%,87.8%,90.2%) rgb(176,224,230)  
purple #800080 rgb(50.2%,0%,50.2%) rgb(128,0,128)  
red #ff0000 rgb(100%,0%,0%) rgb(255,0,0) #f00
rosybrown #bc8f8f rgb(73.7%,56.1%,56.1%) rgb(188,143,143)  
royalblue #4169e1 rgb(25.5%,41.1%,100%) rgb(65,105,225)  
saddlebrown #8b4513 rgb(54.5%,27.1%,7.5%) rgb(139,69,19)  
salmon #fa8072 rgb(98%,50.2%,44.7%) rgb(250,128,114)  
sandybrown #f4a460 rgb(95.7%,64.3%,37.6%) rgb(244,164,96)  
seagreen #2e8b57 rgb(18%,54.5%,34.1%) rgb(46,139,87)  
seashell #fff5ee rgb(100%,96.1%,93.3%) rgb(255,245,238)  
sienna #a0522d rgb(62.7%,32.2%,17.6%) rgb(160,82,45)  
silver #c0c0c0 rgb(75.3%,75.3%,75.3%) rgb(192,192,192)  
skyblue #87ceeb rgb(52.9%,80.8%,92.2%) rgb(135,206,235)  
slateblue #6a5acd rgb(41.6%,35.3%,80.4%) rgb(106,90,205)  
slategray #708090 rgb(43.9%,50.2%,56.5%) rgb(112,128,144)  
slategrey #708090 rgb(43.9%,50.2%,56.5%) rgb(112,128,144)  
snow #fffafa rgb(100%,98%,98%) rgb(255,250,250)  
springgreen #00ff7f rgb(0%,100%,49.8%) rgb(0,255,127)  
steelblue #4682b4 rgb(27.5%,51%,70.6%) rgb(70,130,180)  
tan #d2b48c rgb(82.4%,70.6%,54.9%) rgb(210,180,140)  
teal #008080 rgb(0%,50.2%,50.2%) rgb(0,128,128)  
thistle #d8bfd8 rgb(84.7%,74.9%,84.7%) rgb(216,191,216)  
tomato #ff6347 rgb(100%,38.8%%,27.8%) rgb(255,99,71)  
turquoise #40e0d0 rgb(25.1%,87.7%,81.6%) rgb(64,224,208)  
violet #ee82ee rgb(93.3%,51%,93.3%) rgb(238,130,238)  
wheat #f5deb3 rgb(96.1%,87.1%,70.2%) rgb(245,222,179)  
white #ffffff rgb(100%,100%,100%) rgb(255,255,255) #fff
whitesmoke #f5f5f5 rgb(96.1%,96.1%,96.1%) rgb(245,245,245)  
yellow #ffff00 rgb(100%,100%,0%) rgb(255,255,0) #ff0
yellowgreen #9acd32 rgb(60.4%,80.4%,19.6%) rgb(154,205,50)  

大图hover展示

这里一共有3个事件mouseover、mouseout、mousemove,分别用来进行获取显示大图,隐藏大图以及移动大图。

<div class="htl_pic" id="picList">
    <div class="pic1"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic2"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic3"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic4"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic5"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic6"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic7"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic8"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic9"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
</div>
<div id="popPic" class="hotel_pic_top" style="position:absolute;display:none;"><img src="http://pic.c-ctrip.com/common/pic_alpha.gif" onerror="this.src='http://pic.c-ctrip.com/hotels121118/bg_nopic2.png';" /></div>

HTML里面,div上的自定义属性_src用来存放大图地址,当鼠标移到div上是可以获取对应的src,#popPic下的img用来显示大图,onerror可以防止图片404或者读取失败。

var overPic = '';
var popPic = document.getElementById('popPic');
var picList = document.getElementById('picList');
addEvent(picList, 'mouseover', function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.nodeName == 'DIV') {
        var newPic = target.getAttribute('_src');
        if (!newPic) return;
        if (overPic != newPic) {
            popPic.getElementsByTagName('img')[0].src = newPic;
            overPic = newPic;
        }
        popPic.style.display = '';
    }
});

mouseover时候判断下事件源是否是div,获取_src显示大图。

addEvent(picList, 'mouseout', function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.nodeName == 'DIV') { 
        overPic = ''; 
        popPic.style.display = 'none'; 
        popPic.style.top = '-1000px'; 
        popPic.getElementsByTagName('img')[0].src = 'http://pic.c-ctrip.com/common/pic_alpha.gif';
    }
});

mouseout触发的时候事件源是当前移出的对象,所以判断下是否是div,把浮层隐藏。

dhtmopos

var mousePosition = function (ev) {
    //如上图可以知道对应的范围
    return { 
        left: document.documentElement.scrollLeft || document.body.scrollLeft, //滚动条左侧宽度 
        top: document.documentElement.scrollTop || document.body.scrollTop, //滚动条高度 
        x: ev.clientX, //鼠标X轴坐标,相对于窗口左上角 
        y: ev.clientY, //鼠标Y轴坐标,相对于窗口左上角 
        width: document.documentElement.clientWidth, //窗口宽度 
        height: document.documentElement.clientHeight //窗口高度
    }
}
addEvent(picList, 'mousemove', function (e) {
    e = e || window.event;
    if (overPic) { 
        var mouse = mousePosition(e); //大图尺寸为558 * 420
        popPic.style.left = (mouse.width - 560 < mouse.x ? mouse.x - 570 : mouse.x + 10) + mouse.left + 'px';
        popPic.style.top = Math.min(mouse.height - 420, mouse.y + 10) + mouse.top + 'px';
    }
});

我们通过mousePosition函数来获取我们需要的数据集合,在mousemove的时候修改浮层的位置。

1、首先我们会想到的是浮层位置即鼠标位置。

popPic.style.left = mouse.x + mouse.left + 'px';
popPic.style.top = mouse.y + mouse.top + 'px';
//这样图片就会紧跟着鼠标右下角显示,但是鼠标快速右下移动的时候会发现鼠标会移动到浮层上导致效果不理想,为了解决这个问题我们可以给left/top各加10px。
popPic.style.left = mouse.x + 10 + mouse.left + 'px';
popPic.style.top = mouse.y + 10 + mouse.top + 'px';

2、单单这样还是不够的,当hover的小图位置靠右或靠下时大图就会超出窗口显示范围,所以我们需要有选择的去改变left/top。

第一步,如何判断浮层水平右侧是否超过显示范围,窗口显示宽度 – 浮层宽度 即是临界点,鼠标在该值右侧就会超出范围,反之就不会超出

popPic.style.left = (mouse.width - 560 < mouse.x ? mouse.x - 570 : mouse.x + 10) + mouse.left + 'px';
//mouse.width - 560 < mouse.x 为true时即超出范围,我们就给left赋值mouse.x-558-10,让整个浮层就出现在鼠标的左侧,反之就取mouse.x+10正常显示。

第二步,判断垂直方向,当下方超出显示范围时,我们让浮层底部始终紧贴着窗口底部,那么这时浮层的top就是窗口高度-浮层高度即可。

popPic.style.top = Math.min(mouse.height - 420, mouse.y + 10) + mouse.top + 'px';
//这里我们不用像水平方向一样去做大于小于判断,只需要取mouse.height - 420和mouse.y + 10的最小值即可,原因么?大家想象下超出范围与不超出范围两种情况时的top值就知道了。

Demo:http://unicac.sinaapp.com/jquery/imgMove.html

JS正则的一些运用(获取script代码和trim方法)

写点小函数!

innerHTML添加的js是不会执行的,所以要把js提取出来,使用 script 标签添加到html里就可以执行了。

trim([str])删除首尾对应的内容,注意点就是一些特殊符号要记得处理

/*
 * $extendPrototype 扩展prototype函数
 * @param {Function} constructor
 * @param {Object} prototype
 */
var $extendPrototype = function(constructor,prototype) {
    var c = constructor || function(){},
        p = prototype || {};
    for(var atr in p) {
        c.prototype[atr] = p[atr];
    }
    return c;
}
/*
 * String扩展
 */
var strEx = {
    removeJS : function(){    /*删除Script字符串内容*/
        return this.replace(/<script[^>]*?>([\w\W]*?)<\/script>/ig,'');
    },
    getJS : function(){        /*将Script字符串转换为Script对象,返回Script or false*/
        var js = this.replace(/[\s\S]*?<script[^>]*?>([\w\W]*?)<\/script>[\s\S]*?/g,'$1\r');
        if(js == this){
            return false;
        }else{
            var s = document.createElement('script');
            s.text = js;
            return s;
        }
    },
    trim : function(str){    /*删除首尾相应内容,参数为空则删除空格*/
        var reg;
        if(str){
            str = str.replace(/([\.\+\?\*\\\^\&\[\]\(\)\{\}\$\,])/g,'\\$1');
            reg = new RegExp("^(" + str +")+|(" + str + ")+$","g");/* 特殊字符 (. + ? * \ ^ & [ ] ( ) { } $ ,) */
        }else{
            reg = /^\s+|\s+$/g;
        }
        return this.replace(reg,"");
    }
}
String = $extendPrototype(String,strEx);

JS兼容性问题整理

一、浏览器判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var isIE = /*@cc_on!@*/!1;
var isIE = !!document.all; //这个比较容易记,document.all是IE独有的
var isIE678 = !-[1,]; //本来是判断IE最短的语句,但是IE9+之后变为了false,现在可以用来区分IE678与非IE678(因为IE9已经慢慢向W3C靠拢了)
var isIE6 = isIE &amp;&amp; !window.XMLHttpRequest; //XMLHttpRequest是所有现代浏览器(IE7+、Fi6refox、Chrome、Safari 以及 Opera)内建的对象,IE6不存在
 
/* cQuery下的使用方法 */
if(cQuery.browser.isIE){
    //IE
}else{
    //非IE
};
//更多浏览器
cQuery.browser = {
    isOpera:false,
    isIE:false,
    isIE6:false,
    isIE7:false,
    isIE8:false,
    isIE9:false,
    isFirefox:false,
    isFirefox2:false,
    isFirefox3:false,
    isFirefox4:false,
    isChrome:false,
    isSafari:false,
    isIPhone:false,
    isIPad:false,
    isIPadUCWeb:false
}

二、Dom兼容性

1.childNodes节点数问题

childNodes 属性返回包含被选节点的子节点的 NodeList。语法是elementNode.childNodes

1
2
3
4
5
6
7
8
<div id="Box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<script>
alert(document.getElementById('Box').childNodes.length)
</script>

这个结果在IE6、7、8下是3,在IE9+和非IE浏览器下是7,IE 会忽略节点之间生成的空白文本节点(比如换行字符),而 Mozilla 不这么做,它会将空白文本节点也做为一个节点。因此,在上面的例子中,输出是不同的。如要循环子节点可使用下面的方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
var childs = document.getElementById('Box').childNodes;
for(var i=0,l=childs.length; i<l; i++){
    if(childs[i].nodeName != '#text'){
        //操作节点
    }
}
//如果子节点结构不复杂
var childs = document.getElementById('Box').getElementsByTagName('p');
for(var i=0,l=childs.length; i<l; i++){
    //操作节点
}
//cQuery下
var childs = $('#Box>p');

2.获取页面滚动条当前高度

1
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

document.documentElement.scrollTop在IE、FF下有效,但在chrome下却是0,需要使用document.body.scrollTop来获取。

我们可以用这个来算出某个元素相对于整个页面左上角的距离:

1
var top = elem.getBoundingClientRect().top + (document.documentElement.scrollTop || document.body.scrollTop); //elem.getBoundingClientRect()可以得到元素相对于窗口左上角的坐标值

三、CSS兼容性

1.currentStyle

elem.style 获取的只是内联样式,即style属性中的值。要获取样式表中的样式需要通过elem.currentStyle, elem.currentStyle可获取外部(使用<link>)和内部(使用<style>)样式表以及内联style属性中的样式。

elem.currentStyle仅IE和opera支持,FF、chrome等可通过window.getComputedStyle(elem, null)方法获取。

1
2
3
var currentStyle = element.currentStyle || window.getComputedStyle(element, null);
var margeLeft = currentStyle.margeLeft;
var width = currentStyle.width;

PS:这里单词分割不以”-“为分隔符,而是除第一个单词外其他单词首字母大写。

四、事件

1.event和事件源

在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口。在使用事件委托的时候,通过事件源获取来判断事件到底来自哪个元素,但是,在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。 

1
2
3
4
function handler(e){
    e = e || window.event;
    var target = e.srcElement || e.target;
}

2.事件监听

在事件监听处理方面,IE提供了attachEvent和detachEvent两个接口,而Firefox提供的是addEventListener和removeEventListener,attachEvent和addEventListener用来绑定事件,detachEvent和removeEventListener用来解除绑定,同时Firefox下,事件处理函数中的this指向被监听元素本身,而在IE下则不然,IE默认指向window。

另外在IE678下当对同一元素多次绑定事件时,函数触发的顺序与绑定顺序相反,而IE9和Firefox两者顺序相同,为了保持一致我们可以封装下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function addEvent(oTarget, sEventType, fnHandler) {
    if(!oTarget){return;}
    oTarget.listeners = oTarget.listeners || {};
    var listeners = oTarget.listeners[sEventType] = oTarget.listeners[sEventType] || [];
    listeners.push(fnHandler);
    if(!listeners["_handler"]){
        listeners["_handler"] = function(e){
            var e = e || window.event;
            for(var i = 0,fn;fn = listeners[i++];){
                if(fn.call(oTarget,e) === false){
                    e.preventDefault ? e.stopPropagation() : e.cancelBubble = true;
                    e.preventDefault ? e.preventDefault() : e.returnValue = false;
                    return false;
                }
            }
        }
        oTarget.addEventListener ? oTarget.addEventListener(sEventType, listeners["_handler"], false) : oTarget.attachEvent('on' + sEventType, listeners["_handler"]);
    }
}
function removeEvent(oTarget, sEventType, fnHandler) {
    if(oTarget.listeners && oTarget.listeners[sEventType]){
        var listeners = oTarget.listeners[sEventType];
        for(var i = listeners.length-1;i >= 0 && fnHandler;i--){
            if(listeners[i] == fnHandler){
                listeners.splice(i,1);
            }
        }
        if((!listeners.length || !fnHandler) && listeners["_handler"]){
            oTarget.removeEventListener ? oTarget.removeEventListener(sEventType, listeners["_handler"], false) : oTarget.detachEvent('on' + sEventType, listeners["_handler"]);
            delete oTarget.listeners[sEventType];
        }
    }
}
 
//调用方式
addEvent(document.getElementById('ID'), 'click', function(){alert('do click!')});
//cQuery调用方式
$('#id').bind('click', function(){alert('do click!')});

3.event相关属性和方法

1
2
3
4
5
6
7
8
function handler(e){
    e = e || window.event;
    e.preventDefault ? e.stopPropagation() : e.cancelBubble = true; //阻止事件冒泡
    e.preventDefault ? e.preventDefault() : e.returnValue = false;  //阻止事件源默认事件
 
    /*cQuery下可使用stop()方法*/
    e.stop();
}

tab作为tab点击时我们不想执行页面跳转动作时怎么破?IE提供了returnValue属性,如果设置了该属性,它的值比事件句柄的返回值优先级高,把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。而非IE时可使用preventDefault()方法。

当a标签的父元素上也绑定了事件但我们不想执行时怎么破?IE提供了cancelBubble属性,如果想阻止事件传播到包容对象,必须把该属性设为 true,即阻止事件冒泡。非IE下可使用stopPropagation()方法。

return top