热门标签 | 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属性值”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


推荐阅读
  • 一篇文章搞定css3 3d效果
    css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]
  • Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • CSS:body{font-size:62.5%;}为什么???在网页设计中我们经常看见body{font-size:62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与p ... [详细]
  • Bootstrapfontnotloadingcorrectlyglyphicons-halflings-regular.woff2.引导字体没有正确加载符号-halflingr ... [详细]
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 个项目)
    过往项目2018年9月份项目汇总(共26个项目)2018年8月份项目汇总(共29个项目)2018年7月份项目汇总(共29个项目)2018年6月份项目汇总(共27个项目)2018年5 ... [详细]
  • vue组件支持预处理语言的关键点:<stylerelstylesheetscss>.mint-swipe{hei ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
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社区 版权所有