So erkennen Sie CSS-Eigenschaften

So erkennen Sie CSS-Eigenschaften

Wenn wir erkennen möchten, ob ein CSS-Attribut unterstützt

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

Wenn wir erkennen möchten, ob das CSS3-Attribut einen bestimmten Wert unterstützt

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

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

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

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

So weisen Sie dynamisch einen CSS3-Effekt zu und unterstützen alle gängigen Browser

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;
    })()
};

Informationen

CSS-Geheimnisse

iSlider-Zeile 250

So erkennen Sie CSS-Eigenschaften

Wenn wir erkennen möchten, ob ein CSS-Attribut einen bestimmten Wert unterstützt

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

Wenn wir erkennen möchten ob das CSS3-Attribut einen bestimmten Wert unterstützt

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

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

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

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

So weisen Sie einen CSS3-Effekt dynamisch zu und unterstützen alle gängigen Browser

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;
    })()
};

Weitere verwandte Artikel zum Erkennen von CSS-Funktionen finden Sie bitte Achten Sie auf die chinesische PHP-Website!