CSS 揭秘 - 关于本书

发表于 | 分类于

几个函数：

一，选择器函数

1
2
3
4
5
6
7
8
/**
 * 选择器函数
 */
function $$(selector, context) {
  context = context || document;
  var elements = context.querySelectorAll(selector);
  return Array.prototype.slice.call(elements);
}

注解：

1）使用 ES5 的 querySelectorAll 方法，返回一个 NodeList 对象。

2）NodeList 对象不是数组，需要使用 Array.prototype.slice.call(NodeList) 方法进行转换。

二，检测当前浏览器是否支持CSS属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * 检测多个属性
 */
// 单一功能
var root = document.documentElement;

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

// 通用函数
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;
}

注解：

1）通过 document 的 documentElement 只读属性，获得文档的 root 元素。

2）通过 HTMLElement 的 style 属性，获得 CSSStyleDeclaration 对象，使用 in 运算符查询对象中是否包含该属性。

3）通过 Element 的 classList 属性，获得一个实时 DOMTokenList 集合，使用 add 方法添加 class 属性。

三，检测当前浏览器支持的CSS属性是否支持某属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
 * 检测属性值是否支持
 */
// 单一功能
var dummy = document.createElement('p');
dummy.style.backgroundImage = 'linear-gradient(red, tan)';

if(dummy.style.backgroundImage) {
  root.classList.add('lineargradients');
} else {
  root.classList.add('no-lineargradients');
}
// 通用函数
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;
}