![HTML5+ CSS3+JavaScript 网页设计实战(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/842/26793842/b_26793842.jpg)
2.9 浏览器对HTML属性的支持
对于HTML开发设计人员来讲,浏览器的兼容性是一个复杂又不可回避的问题。随着技术的进步,目前市面上的主流浏览器对HTML的支持已经很完善了,不像早期浏览器的兼容性那样,让开发设计人员伤透了脑筋。
本节介绍浏览器对HTML属性的支持问题,包括对最新的HTML 5属性的支持。HTML 5是一个全新的标准,增加了很多新的特性,对多媒体的支持更全面。因此,浏览器对HTML 5属性的支持也是判断其兼容性的重要指标。
下面看一段判断浏览器是否支持HTML某个属性的代码(参见源代码ch02/ch02-html-support-prop.html文件)。
【代码2-13】
![](https://epubservercos.yuewen.com/98A4CD/15253389505245306/epubprivate/OEBPS/Images/Figure-T67_57516.jpg?sign=1739278664-a9qOdtcXY2g12zfUm9ELE3CzJiJwVHkc-0-477230e4adfe653407dfe7221c41647d)
【代码解析】
第14~18行代码定义了一个JavaScript脚本函数isSupport(prop)。其中,第16行代码通过createElement()函数方法创建一个div标签元素,并使用in方法将对属性的判断结果进行返回。
第29行代码定义了一个包含6个常用的HTML属性的数组“prop”。
第30~32行代码通过for循环语句依次判断数组“prop”中的属性是否为div标签元素所支持,具体是通过isSupportProp()函数方法来判断的。
第33~42行代码是isSupportProp()函数方法的实现过程,在该函数方法内部通过调用第14~18行代码定义的isSupport(prop)函数方法来实现判断。
运行测试网页,效果如图2.16所示。层(div)标签元素是支持“id”、“style”和“title”属性的,而“name”、“type”和“value”属性是不支持的。
![](https://epubservercos.yuewen.com/98A4CD/15253389505245306/epubprivate/OEBPS/Images/Figure-P69_4587.jpg?sign=1739278664-rk5epvOQznNH2CTvtUBGMglcnVaYqs4L-0-d15b7009f781d926a9013f4b8be6a985)
图2.16 HTML常用属性判断结果
下面看一段判断浏览器是否支持HTML 5属性的代码(参见源代码ch02/ch02-html-support-HTML 5.html文件)。
【代码2-14】
![](https://epubservercos.yuewen.com/98A4CD/15253389505245306/epubprivate/OEBPS/Images/Figure-T69_57518.jpg?sign=1739278664-ONO9y8VB9g2iUBxCJlWFp1RLuVzzp37u-0-81bb7e8f66d0c45f8674e7908f9289a5)
【代码解析】
在这段代码中,判断浏览器是否支持HTML 5属性主要是使用了Web Worker属性。第05行代码通过typeof()方法判定Worker属性是否未定义("undefined"),如果定义了则判定浏览器支持HTML 5属性。
下面使用最新版的FireFox浏览器(v.50.0.2版)运行测试该页面,其效果如图2.17所示。可以看出,新版FireFox浏览器对HTML 5是支持的。
下面再使用最新版的Microsoft Edge浏览器(Windows 10预览版自带)运行测试这个页面,其效果如图2.18所示。从中看到,Microsoft Edge浏览器对HTML 5也是支持的。看来不支持HTML 5的浏览器只有早期Windows XP系统下的IE6、IE7和IE8浏览器了。
![](https://epubservercos.yuewen.com/98A4CD/15253389505245306/epubprivate/OEBPS/Images/Figure-P70_4727.jpg?sign=1739278664-gVREfsephMISPOiG87HTQYNlcIbQfAgY-0-d39cdbdd165f9d3c608a49b4638cc72d)
图2.17 判断FireFox浏览器是否支持HTML 5
![](https://epubservercos.yuewen.com/98A4CD/15253389505245306/epubprivate/OEBPS/Images/Figure-P70_4728.jpg?sign=1739278664-LHtWASOBqKoFpo1eCk0F6KpSF1K10D13-0-1a9422bbba3107d302768f39d7cb4f54)
图2.18 判断Microsoft Edge浏览器是否支持HTML 5