使用JavaScript检查浏览器是否支持css3和/或HTML5属性

Question

我想检查用户浏览器是否支持“contenteditable”或任何HTML5属性？

因此，这里是我的JavaScript：

var isEditable=false; 
function chk() { 
    var z=document.getElementById("mydivid"); 

    if(typeof(z["isContentEditable"])==="boolean") { 
     isEditable=true; 
    } 
} 

function doEdit() { 
    chk(); 
    var z=document.getElementById("mydivid"); 
    if(isEditable) { 
     z.setAttribute("contenteditable","true"); 
     z.focus(); 
    } else { 
     /* add a texbox and put all div's innerHTML into it, All in all: a Boring Stuff. */ 
    } 
} 

这里是HTML：

<a href="#" onclick="doEdit();">Click To Edit </a> 
<div id="mydivid"> Hi Ssup ?? <img src='' alt="some image" /></div> 

谁能告诉我，无论我的做法是正确的？它会在IE（版本< 8.0）中工作吗？而且还需要一个更好的方法！

Answer 1

要chcek如果任何属性格式退出的元素。下面链接中包含所有你可以做到这一点

var element = document.createElement('__ELEMENT__'); 
if ('__PROPERTY__' in element) { 
    // property supported in the browser 
} 

或

if ('__PROPERTY__' in document.createElement('__ELEMENT__')) { 
    // property supported in the browser 
} 

的。

1. https://github.com/Modernizr/Modernizr/issues/570
2. http://diveintohtml5.info/everything.html#contenteditable

Answer 2

简单的检查：

if ('isContentEditable' in document.createElement('span')) { 
    // supported 
} 

我也将分享片段的这个伟大的选择它会帮助你在未来：http://diveintohtml5.info/everything.html