Page 29 - css揭秘
P. 29

一元素的 element.style 对象上检查该属性是否存在:
                                                                                                             JS
                                                  var root = document.documentElement; // <html>

                                                  if ('textShadow' in root.style) {
                                                      root.classList.add('textshadow');
                                                  }
                                                  else {
                                                      root.classList.add('no-textshadow');
                                                  }

                                                  如果我们需要检测多个属性,也可以很容易地把上述代码改造成一个
                                              函数:
                                                                                                             JS
                                                  function testProperty(property) {
                                                      var root = document.documentElement;

                                                      if (property in root.style) {
                                                          root.classList.add(property.toLowerCase());
                                                          return true;
                                                      }

                                                      root.classList.add('no-' + property.toLowerCase());
                                                      return false;
                                                  }


                                                  如果我们想要检测某个具体的属性值是否支持,那就需要把它赋给对应
                                              的属性,然后再检查浏览器是不是还保存着这个值。很显然,这个过程会改
                                              变元素的样式,因此我们需要一个隐藏元素:

                                                  var dummy = document.createElement('p');                   JS
                                                  dummy.style.backgroundImage = 'linear-gradient(red,tan)';

                                                  if (dummy.style.backgroundImage) {
                                                      root.classList.add('lineargradients');
                                                  }
                                                  else {
                                                      root.classList.add('no-lineargradients');
                                                  }


                                                  这段代码同样也可以被很容易地改造成一个函数:
                                                                                                             JS
                                                  function testValue(id, value, property) {
                                                      var dummy = document.createElement('p');
                                                      dummy.style[property] = value;

                                                      if (dummy.style[property]) {
                                                          root.classList.add(id);
                                                          return true;
                                                      }

                                                      root.classList.add('no-' + id);
                                                      return false;
                                                  }





                  xxvi  关于本书







          ඀ࠡ  JOEC
   24   25   26   27   28   29   30   31   32   33   34