CSSプロパティを検出する方法

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属性が特定の機能をサポートしているかどうかを検出したい場合value

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 中国語 Web サイトに注目してください。