Everyone should still remember how to write JavaScript in-line styles? (It seems I'm talking nonsense!)
In the front-end development process, sometimes we need to judge the browser's kernel prefix and make different processing for different browsers, so we can do this.
alert(element.style.webkitTransition); This is to get the transition value prefixed with webkit. But if it is not a browser with webkit prefix, it will return undefined. And we can enumerate all kernel prefixes, then get the value of a certain CSS to make a judgment. The code is as follows:
function getVendorPrefix() { // Use body to avoid passing in elements var body = document.body || document.documentElement, style = body.style, vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'], i = 0; while (i < vendor.length) { // Here we determine whether there is a corresponding kernel prefix if (typeof style[vendor[i] + 'Transition'] === 'string') { return vendor[i]; } i++; }}Then you only need to call getVendorPrefix() to know the browser's kernel prefix. If undefined is returned, it proves that the browser does not support the CSS3 attribute, that is, there is no kernel prefix.
Everyone should know that when we can write CSS, we don’t write JavaScriptp when we can write CSS. After all, the performance of CSS will be higher than that of writing JS by ourselves. Therefore, in some practical developments, we will use transitions, such as a simple picture carousel. We can use CSS3 transitions, or use jQuery’s animate or write natively by ourselves, but the performance of CSS3 will definitely be higher, so we can write two sets of code, and use animation for browsers that support CSS3, while timers or animate are used if not supported. This will give you a better user experience.
The above is the experience of looking at the plug-in of jquery.slides.js. If there is a better method, please let me know.