请设计一个 JavaScript 函数，该函数接受一个 CSS 属性名作为参数，并返回一个 boolean 值，表明浏览器是否支持这个属性
🌙
手机阅读
本文目录结构
问题
当我们使用 CSS3新属性，比如：box-shadow 或者transition 时，我们怎么检测 浏览器是否支持这些属性？ 请设计一个 JavaScript 函数，该函数接受一个 CSS 属性名作为参数，并返回一 个 boolean 值，表明浏览器是否支持这个属性
参考答案
首先看单个怎么来判断，可以下面这种的；
var element = document.createElement('div');
if ('text-overflow' in element.style) {
element.style['text-overflow'] = 'ellipsis';
return element.style['text-overflow'] === 'ellipsis';
} else {
return false;
}
然后开始封装
var supports = (function () {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;
return function (prop) {
if (prop in div.style) return true;
prop = prop.replace(/^[a-z]/, function (val) {
return val.toUpperCase();
});
while (len--) {
if (vendors[len] + prop in div.style) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn't.
return true;
}
}
return false;
};
})();
if (supports('textShadow')) {
document.documentElement.className += ' textShadow';
}
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
