Heim  >  Artikel  >  Web-Frontend  >  So erkennen Sie CSS-Eigenschaften

So erkennen Sie CSS-Eigenschaften

高洛峰
高洛峰Original
2017-02-13 14:17:531941Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn