热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使用JavaScript动态设置CSS3属性值

这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读

这篇文章将为大家详细讲解有关如何使用Javascript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

使用Javascript动态设置CSS3属性值使我们能够更精细地控制CSS过渡。在 使用Javascript设置CSS3属性的教程中 ,以下是通用的CSS3属性setter和getter。它实时检查浏览器支持的Javascript形式的CSS属性版本(即:“ transform”或“ WebkitTransform”),并返回该属性。


"vertical-align: inherit;">"vertical-align: inherit;">function getcss3prop(cssprop){"vertical-align: inherit;">"vertical-align: inherit;">

    var css3vendors = [''' -  moz  - '' -  webkit  - '' -  o  - '' -  ms  - '' -  khtml-']"vertical-align: inherit;">"vertical-align: inherit;">

    var root = document.documentElement"vertical-align: inherit;">"vertical-align: inherit;">

    function camelCase(str){"vertical-align: inherit;">"vertical-align: inherit;">

        return str.replace(/ \  - ([az])/ gi,function(match,p1){// p1引用括号中的子匹配            return p1.toUpperCase()//将“ - ”后的第一个字母转换为大写        })"vertical-align: inherit;">"vertical-align: inherit;">

    }"vertical-align: inherit;">"vertical-align: inherit;">

    forvar i = 0; i "vertical-align: inherit;">"vertical-align: inherit;">

        var css3propcamel = camelCase(css3vendors [i] + cssprop)"vertical-align: inherit;">"vertical-align: inherit;">

        if(css3propcamel.substr(0,2)=='Ms'//如果属性以'Ms'开头            css3propcamel ='m'+ css3propcamel.substr(1)//将'M'转换为小写        if(root.style中的css3propcamel)"vertical-align: inherit;">"vertical-align: inherit;">

            返回css3propcamel"vertical-align: inherit;">"vertical-align: inherit;">

    }"vertical-align: inherit;">"vertical-align: inherit;">

    返回undefined"vertical-align: inherit;">"vertical-align: inherit;">

}

只需输入一个未经改动的CSS3属性即可获得浏览器支持的版本。如果浏览器不支持任何形式的属性,undefined则返回。



"vertical-align: inherit;">"vertical-align: inherit;">var transformprop = getcss3prop('transform'//返回'transform'或其中一个变体,例如'msTransform','MozTransform','WebkitTransform'等var transitiOnprop= getcss3prop('transition'//返回'transition'或其中一个变体,例如'MozTransition','WebkitTransition'等

获得CSS3属性的受支持版本后,您可以动态探测或设置其值,例如:





"vertical-align: inherit;">"vertical-align: inherit;">if(transformprop){//如果已定义    var el = document.getElementById('box'"vertical-align: inherit;">"vertical-align: inherit;">

    el.style [transformprop] ='rotate(180deg)scale(1.05,1.05)'"vertical-align: inherit;">"vertical-align: inherit;">

}

关于“如何使用Javascript动态设置CSS3属性值”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


推荐阅读
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文详细介绍了 GWT 中 PopupPanel 类的 onKeyDownPreview 方法,提供了多个代码示例及应用场景,帮助开发者更好地理解和使用该方法。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 在前两篇文章中,我们探讨了 ControllerDescriptor 和 ActionDescriptor 这两个描述对象,分别对应控制器和操作方法。本文将基于 MVC3 源码进一步分析 ParameterDescriptor,即用于描述 Action 方法参数的对象,并详细介绍其工作原理。 ... [详细]
author-avatar
raymondxiao518
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有