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 라인 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 중국어 웹사이트에 주목하세요!