如何检测css特性

如果我们要检测一个css属性是否支持

1
2
3
4
5
6
7
var dom = document.createElement('p');
if ('textShadow' in dom.style) {
alert('支持textShadow属性')
}
else {
alert('不支持textShadow属性')
}

如果我们要检测该css3属性是否支持某值

1
2
3
4
5
6
7
8
9
10
11
var dom = document.createElement('p');

dom.style.backgroundImage = 'linear-gradient(red, tan)';

if (dom.style.backgroundImage) {
alert('支持该属性值');
}

else {
alert('浏览器不支持该属性值')
}

如何动态赋值一个css3效果,并支持所有主流浏览器

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
function iSlider() {};

/**
* @returns {String}
* @private
*/
iSlider.TRANSITION_END_EVENT = null;

iSlider.BROWSER_PREFIX = null;

(function () {
var e = document.createElement('fakeElement');
[
['WebkitTransition', 'webkitTransitionEnd', 'webkit'],
['transition', 'transitionend', null],
['MozTransition', 'transitionend', 'moz'],
['OTransition', 'oTransitionEnd', 'o']
].some(function (t) {
if (e.style[t[0]] !== undefined) {
iSlider.TRANSITION_END_EVENT = t[1];
iSlider.BROWSER_PREFIX = t[2];
return true;
}
});
})();

/**
* @param {String} prop
* @param {String} value
* @returns {String}
* @public
*/
iSlider.styleProp = function (prop, isDP) {
if (iSlider.BROWSER_PREFIX) {
if (!!isDP) {
return iSlider.BROWSER_PREFIX + IU(prop);
} else {
return '-' + iSlider.BROWSER_PREFIX + '-' + prop;
}
} else {
return prop;
}
};

/**
* @param {String} prop
* @param {HTMLElement} dom
* @param {String} value
* @public
*/
iSlider.setStyle = function (dom, prop, value) {
dom.style[iSlider.styleProp(prop, 1)] = value;
};

/**
* @type {Object}
*
* @param {HTMLElement} dom The wrapper <li> element
* @param {String} axis Animate direction
* @param {Number} scale Outer wrapper
* @param {Number} i Wrapper's index
* @param {Number} offset Move distance
* @protected
*/
iSlider._animateFuncs = {
normal: (function () {
function normal(dom, axis, scale, i, offset) {
iSlider.setStyle(dom, 'transform', 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)');
}

normal.effect = iSlider.styleProp('transform');
return normal;
})()
};

资料

css揭秘

iSlider line 250

“我,鸡哥,打钱!”