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


推荐阅读
  • 深入解析动态代理模式:23种设计模式之三
    在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
  • 本文介绍了如何在React和React Native项目中使用JavaScript进行日期格式化,提供了获取近7天、近半年及近一年日期的具体实现方法。 ... [详细]
  • 本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣,并提供了具体的代码示例,帮助读者理解两者在不同场景下的适用性。 ... [详细]
  • ListView简单使用
    先上效果:主要实现了Listview的绑定和点击事件。项目资源结构如下:先创建一个动物类,用来装载数据:Animal类如下:packagecom.example.simplelis ... [详细]
  • 本文探讨了如何使用pg-promise库在PostgreSQL中高效地批量插入多条记录,包括通过事务和单一查询两种方法。 ... [详细]
  • 优雅实现 jQuery 折叠展开下拉菜单
    本文介绍了一种使用 jQuery 实现的优雅折叠和展开效果的下拉菜单,通过简单的 HTML 结构和 CSS 样式,结合 jQuery 脚本,可以轻松创建出美观且功能强大的下拉菜单。 ... [详细]
  • Vue 3.0 翻牌数字组件使用指南
    本文详细介绍了如何在 Vue 3.0 中使用翻牌数字组件,包括其基本设置和高级配置,旨在帮助开发者快速掌握并应用这一动态视觉效果。 ... [详细]
  • 本文介绍了Kettle资源库的基本概念、类型及其管理方法,同时探讨了Kettle的不同运行方式,包括图形界面、命令行以及API调用,并详细说明了日志记录的相关配置。 ... [详细]
  • 深入解析SpringMVC核心组件:DispatcherServlet的工作原理
    本文详细探讨了SpringMVC的核心组件——DispatcherServlet的运作机制,旨在帮助有一定Java和Spring基础的开发人员理解HTTP请求是如何被映射到Controller并执行的。文章将解答以下问题:1. HTTP请求如何映射到Controller;2. Controller是如何被执行的。 ... [详细]
  • Java多线程实现:从1到100分段求和并汇总结果
    本文介绍如何使用Java编写一个程序,通过10个线程分别计算不同区间的和,并最终汇总所有线程的结果。每个线程负责计算一段连续的整数之和,最后将所有线程的结果相加。 ... [详细]
  • 本文探讨了在 SQL Server 中使用 JDBC 插入数据时遇到的问题。通过详细分析代码和数据库配置,提供了解决方案并解释了潜在的原因。 ... [详细]
  • 深入解析Java多线程与并发库的应用:空中网实习生面试题详解
    本文详细探讨了Java多线程与并发库的高级应用,结合空中网在挑选实习生时的面试题目,深入分析了相关技术要点和实现细节。文章通过具体的代码示例展示了如何使用Semaphore和SynchronousQueue来管理线程同步和任务调度。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 深入剖析JVM垃圾回收机制
    本文详细探讨了Java虚拟机(JVM)中的垃圾回收机制,包括其意义、对象判定方法、引用类型、常见垃圾收集算法以及各种垃圾收集器的特点和工作原理。通过理解这些内容,开发人员可以更好地优化内存管理和程序性能。 ... [详细]
  • iOS绘制就是采集点,贝塞尔曲线得到形状,绘图上下文去渲染出来AsanaDrawsana图形库,设计的挺好他可以画多种图形, ... [详细]
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社区 版权所有