如何检测css特性

izhuhaodev 发布于2019-08-30 15:52 / 1984人阅读

摘要：如何检测特性如果我们要检测一个属性是否支持支持属性不支持属性如果我们要检测该属性是否支持某值支持该属性值浏览器不支持该属性值如何动态赋值一个效果，并支持所有主流浏览器资料揭秘

如何检测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  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检测函数如何写css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116457.html

如何检测css特性

摘要：如何检测特性如果我们要检测一个属性是否支持支持属性不支持属性如果我们要检测该属性是否支持某值支持该属性值浏览器不支持该属性值如何动态赋值一个效果，并支持所有主流浏览器资料揭秘如何检测css特性如果我们要检测一个css属性是否支持 var dom = document.createElement(p); if (textShadow in dom.style) { alert...

jsliang 2019-08-20 14:13 评论0 收藏0
使用modernizr.js检测浏览器对html5以及css3的支持情况

摘要：使用检测浏览器对和的支持情况详情请看主页主页是什么是一个库一个用于检测当前浏览器对的支持情况，其中包括对的的支持检测，以及的等的支持情况。如何使用它使用非常简单，只需要在官网下载文件，并在页面的标签中引用接着在标签中加入类就可以了。使用modernizr.js检测浏览器对html5和css3的支持情况详情请看主页：modernizr主页 1. modernizr 是什么？ mode...

tianlai 2019-08-02 18:12 评论0 收藏0
前端兼容性探讨

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...

MobService 2019-08-01 17:19 评论0 收藏0
前端兼容性探讨

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...

Andrman 2019-08-20 18:27 评论0 收藏0
前端兼容性探讨

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...

developerworks 2019-08-29 13:03 评论0 收藏0