如何检测css特性

来源：动视网责编：小采时间：2020-11-27 18:53:18

如何检测css特性

如何检测css特性:如何检测css特性如果我们要检测一个css属性是否支持var dom = document.createElement('p'); if ('textShadow' in dom.style) { alert('支持textShadow属性') } else { alert('不支

推荐度：

点击下载本文 文档为doc格式

导读如何检测css特性:如何检测css特性如果我们要检测一个css属性是否支持var dom = document.createElement('p'); if ('textShadow' in dom.style) { alert('支持textShadow属性') } else { alert('不支

如何检测css特性

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

var dom = document.createElement('p');
if ('textShadow' in dom.style) {
 alert('支持textShadow属性')
}
else {
 alert('不支持textShadow属性')
}

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

var dom = document.createElement('p');

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

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

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

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

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

如何检测css特性

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

var dom = document.createElement('p');
if ('textShadow' in dom.style) {
 alert('支持textShadow属性')
}
else {
 alert('不支持textShadow属性')
}

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

var dom = document.createElement('p');

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

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

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

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

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特性相关文章请关注PHP中文网！