js判断并告知支持css属性（值）的何种情况

我们想知道某个css属性（值）是否起效，一般被告知结果是“起效”或“不起效”。但是css属性存在浏览器私有属性一说，即会有加了浏览器前缀才会生效的css属性。
所以你更加需要知道，对于目前浏览器来说，哪个前缀或不需要前缀的css属性才会起效，而不仅仅是知道起效与否（自己每个前缀作为输入值进行校验，是繁琐的！网络上的很多资料往往会告诉你是否支持你指定的css，返回的boolean值）
所以下面的方法，只需要你把css属性（值）作为输入值，不需要带上前缀，便能告知你，当前使用的浏览器支持哪个前缀的用法或压根不需要前缀。

http://weibo.com/ttarticle/p/show?id=2309404476939028005414
http://weibo.com/ttarticle/p/show?id=2309404476938709237806
http://weibo.com/ttarticle/p/show?id=2309404476938319167573
http://weibo.com/ttarticle/p/show?id=2309404476933961285964
https://weibo.com/ttarticle/p/show?id=2309404477411558294055
https://weibo.com/ttarticle/p/show?id=2309404477411159834652
https://weibo.com/ttarticle/p/show?id=2309404477410434220075
检查css属性名
该方法检查的是css的属性本身，即属性名，即写css的时候:的左侧。如果返回值是空，那么证明浏览器不支持该属性。
/**

• 告知浏览器支持的指定css属性情况
• @param {String} key - css属性，是属性的名字，不需要加前缀
• @returns {String} - 支持的属性情况
  */
  function validateCssKey(key) {
  const jsKey = toCamelCase(key); // 有些css属性是连字符号形成
  if (jsKey in document.documentElement.style) {
  return key;
  }
  let validKey = ‘’;
  // 属性名为前缀在js中的形式，属性值是前缀在css中的形式
  // 经尝试，Webkit 也可是首字母小写 webkit
  const prefixMap = {
  Webkit: ‘-webkit-’,
  Moz: ‘-moz-’,
  ms: ‘-ms-’,
  O: ‘-o-’
  };
  for (const jsPrefix in prefixMap) {
  const styleKey = toCamelCase(${jsPrefix}-${jsKey});
  if (styleKey in document.documentElement.style) {
  validKey = prefixMap[jsPrefix] + key;
  break;
  }
  }
  return validKey;
  }

/**

• 把有连字符号的字符串转化为驼峰命名法的字符串
  /
  function toCamelCase(value) {
  return value.replace(/-(\w)/g, (matched, letter) => {
  return letter.toUpperCase();
  });
  }
  复制代码检查css属性值
  该方法检查的是css的属性的值，即写css的时候:的右侧。如果返回值是空，那么证明浏览器不支持该属性值。
  这里分为两个版本，一个是es6版本，一个是基础的js版本。
  纯属自己多余写了两个版本
  /*
• 检查浏览器是否支持某个css属性值（es6版）
• @param {String} key - 检查的属性值所属的css属性名
• @param {String} value - 要检查的css属性值（不要带前缀）
• @returns {String} - 返回浏览器支持的属性值
  */
  function valiateCssValue (key, value) {
  const prefix = [’-o-’, ‘-ms-’, ‘-moz-’, ‘-webkit-’, ‘’];
  const prefixValue = prefix.map(item => {
  return item + value;
  });
  const element = document.createElement(‘div’);
  const eleStyle = element.style;
  // 应用每个前缀的情况，且最后也要应用上没有前缀的情况，看最后浏览器起效的何种情况
  // 这就是最好在prefix里的最后一个元素是’’
  prefixValue.forEach(item => {
  eleStyle[key] = item;
  });
  return eleStyle[key];
  }

/**

• 检查浏览器是否支持某个css属性值
• @param {String} key - 检查的属性值所属的css属性名
• @param {String} value - 要检查的css属性值（不要带前缀）
• @returns {String} - 返回浏览器支持的属性值
  */
  function valiateCssValue (key, value) {
  var prefix = [’-o-’, ‘-ms-’, ‘-moz-’, ‘-webkit-’, ‘’];
  var prefixValue = [];
  for (var i = 0; i < prefix.length; i++) {
  prefixValue.push(prefix[i] + value)
  }
  var element = document.createElement(‘div’);
  var eleStyle = element.style;
  for (var j = 0; j < prefixValue.length; j++) {
  eleStyle[key] = prefixValue[j];
  }
  return eleStyle[key];
  }
  复制代码总结
  我们可以简单地上述对于两种形式的css兼容性进行合并，不用显式地采用调用检查属性名还是属性值的方法，直接传入css，告知浏览器支持的情况。
  function validCss (key, value) {
  const validCss = validateCssKey(key);
  if (validCss) {
  return validCss;
  }
  return valiateCssValue(key, value);
  }