Pet*_*son 16 html javascript dom
HTML <blink>标签,在支持它的浏览器(即Mozilla Firefox和Opera)中,使其内容闪烁,类似于慢速闪光灯的效果.
我正在为非标准HTML编写一套polyfill,包括blink标签.闪烁行为的实现非常简单
(function blink(n) {
var blinks = document.getElementsByTagName("blink"),
visibility = n % 2 === 0 ? "visible" : "hidden";
for (var i = 0; i < blinks.length; i++) {
blinks[i].style.visibility = visibility;
}
setTimeout(function() {
blink(n + 1);
}, 500);
})(0);
(你可以看到这个)
但这并没有检测到浏览器是否已经支持该blink标记,并且在已经支持它的浏览器中,会出现双重闪烁效应.我需要一些功能检测来确定浏览器是否支持闪烁,如果没有,那么它会回到我的Javascript polyfill上.
我不想进行浏览器检测,因为该解决方案不可扩展,并且由于人们可以blink在Firefox首选项中禁用行为,因此该解决方案无效.
有没有办法检测blink元素的支持？
我刚刚对此事进行了一些研究,我想我可能会找到答案......
我确定你知道CSS属性支持检测？好吧,有一个text-decoration: blinkCSS属性.所以如果浏览器支持<blink>它也必须支持CSS属性!
这是正常的CSS属性检测,即textDecoration支持检测这样做:
if (document.createElement("detect").style.textDecoration === "") {
// textDecoration supported
}
也许你可以尝试这样的事情:
if (document.createElement("detect").style.textDecoration === "blink") {
// textDecoration: blink supported ?
}
或沿着这些方向......
我有4个浏览器,所以用4个浏览器进行测试.在这4个中,只有FireFox支持闪烁标记.<blink>在HTML文档中注册为FF中的"Span"元素,但在其他3个浏览器中,它被注册为unknown元素.
<html>
<head>
<script type="text/javascript">
function investigate() {
var blinker = document.getElementsByTagName("blink")[0];
document.getElementById("monitor").innerHTML += blinker;
}
</script>
</head>
<body onload="investigate()">
<blink>Hello, blink!</blink>
<div id="monitor"> </div>
</body>
</html>
Internet Explorer [7,8,9] 不受支持
你好,眨眼!
[宾语]
Chrome [18] 不受支持
你好,眨眼!
[对象HTMLUnknownElement]
Safari [5] 不受支持
你好,眨眼!
[对象HTMLElement]
支持 FireFox [3.6]
你好,眨眼!
[对象HTMLSpanElement]
| 归档时间： |
|
| 查看次数： |
2131 次 |
| 最近记录： |