一段非常简单的js判断浏览器的内核
2023-06-13 09:15:43 时间
大家应该还记得JavaScript行内样式怎么写吧?(看来我是废话了!)
在前端开发过程中,有时我们需要判断浏览器的内核前缀,对不同的浏览器做出不同的处理,因此我们可以这么做。
alert(element.style.webkitTransition);这个是获取以webkit为前缀的transition值。但如果不是webkit为前缀的浏览器,则会返回undefined。而我们可以将所有的内核前缀给枚举出来,然后获取其某个CSS的值,即可做出判断。代码如下:
functiongetVendorPrefix(){ //使用body是为了避免在还需要传入元素 varbody=document.body||document.documentElement, style=body.style, vendor=["webkit","khtml","moz","ms","o"], i=0; while(i<vendor.length){ //此处进行判断是否有对应的内核前缀 if(typeofstyle[vendor[i]+"Transition"]==="string"){ returnvendor[i]; } i++; } }
然后只需要调用getVendorPrefix()即可知道浏览器的内核前缀,如果返回undefined则证明浏览器不支持CSS3属性,即没有内核前缀。
大家应该知道,我们在写代码的过程中,能写CSS就不写JavaScritp,毕竟CSS的性能会比自己写JS的高一些,因此,我们在开发一些实际应该中,会用到transition,比如一个简单的图片轮播,我们可以使用CSS3的transition,也可以使用jQuery的animate或自己写原生,但CSS3的性能肯定会高一些,因此我们可以写两套代码,对于支持CSS3的浏览器则使用animation,而不支持的则使用计时器或animate。这样的话能够获取更好的用户体验。
以上是看jquery.slides.js的插件心得,如有更好的方法,请一定告知笔者。
相关文章
- 在html中js如何给字符串中加换行符
- js把HTML转成对象,将js对象转换为html「建议收藏」
- 【说站】js中有哪些书写位置
- 【说站】js迭代器模式是什么
- Js生成二维码_js在线生成二维码
- JS对象转数组_js怎么把数组转成对象
- javascript动画效果_js动画效果animate
- JS技术连接Oracle数据库实现数据交互(js连接oracle实例)
- 使用JS在网页中连接Oracle数据库(js网页链接oracle)
- 数据JS技术实现实时获取Oracle数据(js实时获取oracle)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- 才发现的超链接js导致网页中GIF动画停止的解决方法
- js数组操作代码集锦
- 工作中常用到的JS表单验证代码(包括例子)
- 原生js实现跨浏览器获取鼠标按键的值
- Json字符串转换为JS对象的高效方法实例
- js获取光标位置和设置文本框光标位置示例代码
- js操作输入框提示信息且响应鼠标事件
- 判断日期是否能跨月查询的js代码
- window.top[_CACHE]实现多个jsp页面共享一个js对象
- JS判断是否360安全浏览器极速内核的方法