怎么使和html5兼容所有浏览器

2023-04-24 03:07:02JavaScript012

怎么使和html5兼容所有浏览器,第1张

让HTML5

兼容所有浏览器的

方法.如今HTML5愈来愈引发大家的关注了，但目前支持HTML5的浏览器还不是主流，特别是国内用户近50%以上仍旧使用IE6，由于支持HTML5

的IE9不支持Xp系统安装，这样未来很长一段时间，HTML5的开发者将必须考虑向下兼容的问题。HTML5的标签或CSS选择器兼容性的做法有很多，

其中自己生成标签元素就是一种。

基本原理参见如下代码在IE8中效果，样式根本没有起作用。

Markup

<html>

<head>

<style>

mxria{

color:

red

}</style>

</head>

<body>

<mxria>Hello!mxria.com</mxria>

</body>

</html>

为了是浏览器识别标签并显示对应样式的效果，我们可以如下增加一段js，看到效果就不同了

Markup

<html>

<head>

<style>

mxria{

color:

red

}</style>

</head>

<body>

<mxria>Hello!mxria.com</mxria>

</body>

</html>

现在可以看出来了吧，对，就是document.createElement

，HTML5

shiv

是一个js插件，将所有HTML5的标签进行了重新生成，你需要加载该插件，那么HTML5程序就能被所有浏览器识别了。

querySelectorAll()的作用是：按文档顺序返回指定元素节点的子树中匹配选择器的元素集合，如果没有匹配返回空集合。

相关延伸：

在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。

事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。

用法：

document.querySelectorAll("#test")[0]

document.querySelectorAll("div.test>p:first-child")[0]

document.querySelectorAll( '.test span' )

浏览器兼容性：

虽然有些问题，但瑕不掩瑜，这么好用的两个方法咋没火呢？浏览器兼容性。。。其实比起一些HTML5和CSS3的特性来说这两个方法还没那么让人绝望，因为IE8都已经支持了，其它各个主力主流浏览器自然是实现了。

IE8+

Firefox

Chrome

Safari

Opera

Android

所以如果你是针对Mobile web优化，不要引用jQuery了，直接使用这两个方法就可以。

给你推荐一个间断兼容性比较好JS代码！

<html>

<head>

<title>Js日期选择器并自动加入到输入框中</title>

var gMonths=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")

var WeekDay=new Array("日","一","二","三","四","五","六")

var strToday="今天"

var strYear="年"

var strMonth="月"

var strDay="日"

var splitChar="-"

var startYear=2000

var endYear=2050

var dayTdHeight=12

var dayTdTextSize=12

var gcNotCurMonth="#E0E0E0"

var gcRestDay="#FF0000"

var gcWorkDay="#444444"

var gcMouseOver="#79D0FF"

var gcMouseOut="#F4F4F4"

var gcToday="#444444"

var gcTodayMouseOver="#6699FF"

var gcTodayMouseOut="#79D0FF"

var gdCtrl=new Object()

var goSelectTag=new Array()

var gdCurDate=new Date()

var giYear=gdCurDate.getFullYear()

var giMonth=gdCurDate.getMonth()+1

var giDay=gdCurDate.getDate()

function $(){var elements=new Array()for(var i=0i<arguments.lengthi++) {var element=arguments[i]if(typeof(arguments[i])=='string'){element=document.getElementById(arguments[i])}if(arguments.length==1){return element}elements.Push(element)}return elements}

Array.prototype.Push=function(){var startLength=this.lengthfor(var i=0i<arguments.lengthi++){this[startLength+i]=arguments[i]}return this.length}

String.prototype.HexToDec=function(){return parseInt(this,16)}

String.prototype.cleanBlank=function(){return this.isEmpty()?"":this.replace(/\s/g,"")}

function checkColor(){var color_tmp=(arguments[0]+"").replace(/\s/g,"").toUpperCase()var model_tmp1=arguments[1].toUpperCase()var model_tmp2="rgb("+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(5).HexToDec()+")"model_tmp2=model_tmp2.toUpperCase()if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true}return false}

function $V(){return $(arguments[0]).value}

function fPopCalendar(evt,popCtrl,dateCtrl){evt.cancelBubble=truegdCtrl=dateCtrlfSetYearMon(giYear,giMonth)var point=fGetXY(popCtrl)with($("calendardiv").style){left=point.x+"px"top=(point.y+popCtrl.offsetHeight+1)+"px"visibility='visible'zindex='99'position='absolute'}$("calendardiv").focus()}

function fSetDate(iYear,iMonth,iDay){var iMonthNew=new String(iMonth)var iDayNew=new String(iDay)if(iMonthNew.length<2){iMonthNew="0"+iMonthNew}if(iDayNew.length<2){iDayNew="0"+iDayNew}gdCtrl.value=iYear+splitChar+iMonthNew+splitChar+iDayNewfHideCalendar()}

function fHideCalendar(){$("calendardiv").style.visibility="hidden"for(var i=0i<goSelectTag.lengthi++){goSelectTag[i].style.visibility="visible"}goSelectTag.length=0}

function fSetSelected(){var iOffset=0var iYear=parseInt($("tbSelYear").value)var iMonth=parseInt($("tbSelMonth").value)var aCell=$("cellText"+arguments[0])aCell.bgColor=gcMouseOutwith(aCell){var iDay=parseInt(innerHTML)if(checkColor(style.color,gcNotCurMonth)){iOffset=(innerHTML>10)?-1:1}iMonth+=iOffsetif(iMonth<1){iYear--iMonth=12}else if(iMonth>12){iYear++iMonth=1}}fSetDate(iYear,iMonth,iDay)}

function Point(iX,iY){this.x=iXthis.y=iY}

function fBuildCal(iYear,iMonth){var aMonth=new Array()for(var i=1i<7i++){aMonth[i]=new Array(i)}var dCalDate=new Date(iYear,iMonth-1,1)var iDayOfFirst=dCalDate.getDay()var iDaysInMonth=new Date(iYear,iMonth,0).getDate()var iOffsetLast=new Date(iYear,iMonth-1,0).getDate()-iDayOfFirst+1var iDate=1var iNext=1for(var d=0d<7d++){aMonth[1][d]=(d<iDayOfFirst)?(iOffsetLast+d)*(-1):iDate++}for(var w=2w<7w++){for(var d=0d<7d++){aMonth[w][d]=(iDate<=iDaysInMonth)?iDate++:(iNext++)*(-1)}}return aMonth}

function fDrawCal(iYear,iMonth,iCellHeight,iDateTextSize){var colorTD=" bgcolor='"+gcMouseOut+"' bordercolor='"+gcMouseOut+"'"var styleTD=" valign='middle' align='center' style='height:"+iCellHeight+"pxfont-weight:bolderfont-size:"+iDateTextSize+"px"var dateCal=""dateCal+="<tr>"for(var i=0i<7i++){dateCal+="<td"+colorTD+styleTD+"color:#990099'>"+WeekDay[i]+"</td>"}dateCal+="</tr>"for(var w=1w<7w++){dateCal+="<tr>"for(var d=0d<7d++){var tmpid=w+""+ddateCal+="<td"+styleTD+"cursor:pointer' onclick='fSetSelected("+tmpid+")'>"dateCal+="<span id='cellText"+tmpid+"'></span>"dateCal+="</td>"}dateCal+="</tr>"}return dateCal}

function fUpdateCal(iYear,iMonth){var myMonth=fBuildCal(iYear,iMonth)var i=0for(var w=1w<7w++){for(var d=0d<7d++){with($("cellText"+w+""+d)){parentNode.bgColor=gcMouseOutparentNode.borderColor=gcMouseOutparentNode.onmouseover=function(){this.bgColor=gcMouseOver}parentNode.onmouseout=function(){this.bgColor=gcMouseOut}if(myMonth[w][d]<0){style.color=gcNotCurMonthinnerHTML=Math.abs(myMonth[w][d])}else{style.color=((d==0)||(d==6))?gcRestDay:gcWorkDayinnerHTML=myMonth[w][d]if(iYear==giYear &&iMonth==giMonth &&myMonth[w][d]==giDay){style.color=gcTodayparentNode.bgColor=gcTodayMouseOutparentNode.onmouseover=function(){this.bgColor=gcTodayMouseOver}parentNode.onmouseout=function(){this.bgColor=gcTodayMouseOut}}}}}}}

function fSetYearMon(iYear,iMon){$("tbSelMonth").options[iMon-1].selected=truefor(var i=0i<$("tbSelYear").lengthi++){if($("tbSelYear").options[i].value==iYear){$("tbSelYear").options[i].selected=true}}fUpdateCal(iYear,iMon)}

function fPrevMonth(){var iMon=$("tbSelMonth").valuevar iYear=$("tbSelYear").valueif(--iMon<1){iMon=12iYear--}fSetYearMon(iYear,iMon)}

function fNextMonth(){var iMon=$("tbSelMonth").valuevar iYear=$("tbSelYear").valueif(++iMon>12){iMon=1iYear++}fSetYearMon(iYear,iMon)}

function fGetXY(aTag){var oTmp=aTagvar pt=new Point(0,0)do{pt.x+=oTmp.offsetLeftpt.y+=oTmp.offsetTopoTmp=oTmp.offsetParent}while(oTmp.tagName.toUpperCase()!="BODY")return pt}

function getDateDiv(){var noSelectForIE=""var noSelectForFireFox=""if(document.all){noSelectForIE="onselectstart='return false'"}else{noSelectForFireFox="-moz-user-select:none"}var dateDiv=""dateDiv+="<div id='calendardiv' onclick='event.cancelBubble=true' "+noSelectForIE+" style='"+noSelectForFireFox+"position:absolutez-index:99visibility:hiddenborder:1px solid #999999'>"dateDiv+="<table border='0' bgcolor='#E0E0E0' cellpadding='1' cellspacing='1' >"dateDiv+="<tr>"dateDiv+="<td><input type='button' id='PrevMonth' value='<' style='height:20pxwidth:20pxfont-weight:bolder' onclick='fPrevMonth()'>"dateDiv+="</td><td><select id='tbSelYear' style='border:1px solid' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'>"for(var i=startYeari<endYeari++){dateDiv+="<option value='"+i+"'>"+i+strYear+"</option>"}dateDiv+="</select></td><td>"dateDiv+="<select id='tbSelMonth' style='border:1px solid' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'>"for(var i=0i<12i++){dateDiv+="<option value='"+(i+1)+"'>"+gMonths[i]+"</option>"}dateDiv+="</select></td><td>"dateDiv+="<input type='button' id='NextMonth' value='>' style='height:20pxwidth:20pxfont-weight:bolder' onclick='fNextMonth()'>"dateDiv+="</td>"dateDiv+="</tr><tr>"dateDiv+="<td align='center' colspan='4'>"dateDiv+="<div style='background-color:#cccccc'><table width='100%' border='0' cellpadding='3' cellspacing='1'>"dateDiv+=fDrawCal(giYear,giMonth,dayTdHeight,dayTdTextSize)dateDiv+="</table></div>"dateDiv+="</td>"dateDiv+="</tr><tr><td align='center' colspan='4' nowrap>"dateDiv+="<span style='cursor:pointerfont-weight:bolder' onclick='fSetDate(giYear,giMonth,giDay)' onmouseover='this.style.color=\""+gcMouseOver+"\"' onmouseout='this.style.color=\"#000000\"'>"+strToday+":"+giYear+strYear+giMonth+strMonth+giDay+strDay+"</span>"dateDiv+="</tr></tr>"dateDiv+="</table></div>"return dateDiv}

with(document){onclick=fHideCalendarwrite(getDateDiv())}

</script>

</head>

<body>

</body>

</html>

参考资料： http://www.tswzsj.com/html/wzjsxw/287.html

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：JS 如何获取动态生成的元素的数据，并且进行操作

# 下一篇：笔记本电脑怎么连接无线网