`
xiaotongeye
  • 浏览: 19200 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

js检测css样式的兼容问题

阅读更多
<script>

            function supportCss3(style) { 
                var prefix = ['webkit', 'Moz', 'ms', 'o'], 
                    i, 
                    humpString = [], 
                    htmlStyle = document.documentElement.style, 
                    _toHumb = function (string) { 
                    return string.replace(/-(\w)/g, function ($0, $1) { 
                    return $1.toUpperCase(); 
                    }); 
                    }; 
 
            for (i in prefix) 
                humpString.push(_toHumb(prefix[i] + '-' + style)); 
 
                humpString.push(_toHumb(style)); 
 
            for (i in humpString) 
                if (humpString[i] in htmlStyle) 
                return true; 
 
                    return false; 
                
            }
               //测试用例
                alert(supportCss3('opacity'));
                if(supportCss3('opacity') == true){
                    
                    document.getElementById('header').style.backgroundColor = 'rgba(51,51,51,0.3)';
                    }
                    else{
                        
                        document.getElementById('header').style.backgroundColor = '#333';
                        }
</script>
分享到:
评论

相关推荐

    IEtest 5-8 css样式兼容

    IEtest 5-8 css样式兼容是一款专门用于测试网站在Internet Explorer (IE) 5到8之间CSS样式表现的工具。这款软件对于那些需要确保其设计在老版IE浏览器中正常显示的开发者来说,具有极高的实用价值。 Internet ...

    获取css样式 兼容写法

    总之,获取CSS样式时的兼容性问题需要开发者对不同浏览器的特点有深入理解,并采取相应的技术手段进行处理。通过使用正确的JavaScript方法和充分考虑CSS前缀,可以确保我们的样式在各种环境下都能正确显示。

    Printer_js_css 纯js实现web打印服务,完全兼容

    Printer_js_css 提供了更高级的功能,例如预览、选择打印机、设置打印选项等,这些都是通过自定义的JavaScript代码和CSS样式来实现的。通过这种方式,我们可以确保打印出来的内容与屏幕显示的一致性,提高用户体验。...

    css样式和内存泄漏

    CSS样式兼容性涉及不同浏览器如何解析和显示CSS代码,而内存泄漏则关乎程序效率和资源管理。 首先,我们来看CSS样式的兼容性。不同的浏览器,如Firefox和IE(Internet Explorer),对CSS的解析方式可能存在差异,这...

    js添加css样式小技巧

    ### js添加css样式小技巧 在前端开发过程中,经常需要使用JavaScript动态地为网页元素添加或修改CSS样式。本文将详细介绍几种使用JavaScript添加CSS样式的技巧,并解释它们的工作原理及适用场景。 #### 一、使用`...

    css和js的浏览器兼容问题汇总

    总的来说,解决CSS和JavaScript的浏览器兼容问题需要开发者对各种浏览器的特性有深入理解,并善于运用工具和技巧进行调试和优化。如使用Firebug、Web Developer、DebugBar等开发工具可以帮助开发者快速定位和解决...

    jQuery官网CSS样式复刻

    在本项目中,“jQuery官网CSS样式复刻”是一项旨在重现jQuery官方网站前端界面样式的实践任务。这个任务主要涉及五个核心技术领域:jQuery、CSS、JavaScript(包括ECMAScript)、HTML以及网页资源管理。下面我们将...

    JavaScript\JS\按钮类css按钮样式1

    根据提供的文件信息,我们可以总结出以下关于 JavaScript 和 CSS 按钮样式的相关知识点: ### 一、HTML 页面结构 1. **文档类型声明**:虽然文档中未明确指定,但通常一个完整的 HTML 文件应该以 `&lt;!DOCTYPE ...

    CSS浏览器兼容问题

    ### CSS浏览器兼容问题详解 #### 一、引言 在Web开发过程中,浏览器兼容性问题一直是前端工程师关注的重点。不同的浏览器对于CSS的支持程度各不相同,导致同样的代码在不同的浏览器中可能呈现出不同的效果。本文将...

    IE6与CSS样式兼容问题汇总

    1、PNG半透明图片的问题 虽然可以通过JS等方式解决,但依然存在载入速度等问题,所以,这个上能不要用还是尽量不要用。以达到网站最大优化。 2、IE6下的圆角 IE6不支持CSS3的圆角属性,比较好的解决方法就是用图片...

    css浏览器兼容问题全面汇总

    然而,不同的浏览器对于CSS的支持程度和解析方式可能存在差异,这就导致了所谓的“浏览器兼容问题”。本篇文章将全面汇总CSS在各主流浏览器中的兼容性问题,并提供解决方案,帮助开发者有效地处理这些头疼的问题。 ...

    css3兼容圆角

    引入`css3.htc`文件的方法是在CSS样式中使用`behavior`属性。例如: ```css .box { border-radius: 10px; /* CSS3 圆角属性 */ -ms-behavior: url(/path/to/css3.htc); /* IE8 及以下版本的引用路径 */ } ``` 在...

    CSS样式漂亮Tab页

    综上所述,创建“CSS样式漂亮Tab页”不仅涉及到CSS的布局、样式设计和交互效果,还需要考虑响应式设计、浏览器兼容性和可访问性等多个方面。通过熟练掌握这些技巧,我们可以创建出既美观又实用的Tab页,提升用户在...

    纯CSS流程步骤箭头样式

    在"阿里云-流程步骤样式_files"目录下,可能包含了一些辅助的CSS文件或图片资源,这些文件可能是为了实现更复杂的样式或者兼容性问题而准备的。例如,可能有一个全局的CSS样式表(如`style.css`),包含了通用的样式...

    CSS样式CSS教程CSS滤镜

    值得注意的是,CSS滤镜功能在不同浏览器中的支持程度不同,开发者在使用时需要考虑兼容性问题,可能需要借助前缀(如 `-webkit-`)或者使用JavaScript库来实现跨浏览器的滤镜效果。 这个“CSS教程CSS样式CSS滤镜”...

    最全的CSS浏览器兼容问题

    【CSS浏览器兼容问题详解】 在Web开发中,CSS(层叠样式表)是用于控制网页元素样式的关键技术,但它在不同浏览器之间的兼容性问题一直是开发者面临的挑战。以下是一些常见的CSS浏览器兼容问题及其解决策略: 1. *...

    IE兼容CSS3

    本文将深入探讨如何通过一句JavaScript代码来解决IE对CSS3的兼容问题,并提供一个实际案例供参考。 首先,我们要理解IE浏览器的兼容性挑战。在IE8及更早版本中,浏览器内核使用的是Trident,它对CSS3新特性的支持...

    css 浏览器兼容性速查

    例如,Can I Use 网站提供了详尽的CSS和JavaScript特性支持情况,开发者可以快速查询并对比不同浏览器的兼容性。同时,浏览器开发者工具也提供了实时查看和调试CSS在特定浏览器上的效果的功能。 最后,为了保证网站...

    CSS浏览器的兼容问题

    ### CSS浏览器兼容问题详解 #### 一、引言 随着Web技术的发展,前端开发变得越来越复杂,特别是CSS的跨浏览器兼容性问题一直是开发者们头疼的问题之一。不同的浏览器对CSS的支持程度不同,导致同样的一段CSS代码在...

Global site tag (gtag.js) - Google Analytics