浅谈javascript获取元素transform参数
作者:hebedich 发布时间:2024-04-16 10:32:39
之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值。
body{-webkit-transform: translateX(20px);}
但当我尝试这样做的时候,奇迹出现了:
当时我的内心几乎是崩溃的,我只想安安静静的获取translate的值而已啊,谁知给我弹出这货,虽然上高数课的时候也有讲到所有变化(二维、三维)效果都可以浓缩在一个矩阵里面的,但如果要逆向解析矩阵得到我想要的值就不是这么简单了。
一次偶然的机会,我再次想用js获取translate的值,这次的结果出乎意料:
看到这一幕,简直是泪如雨下,虽然不能直接就得到我要的值,但是拿正则匹配一下就可以了。
你是不是以为是jq做了手脚?其实不然,我比对了一下,发现两次body样式的写法是不一样的:
第一次:
body{-webkit-transform: translateX(20px);}
第二次:
<body style='-webkit-transform: translateX(20px);'></body>
没错,第一次是通过css设置,第二次是通过body的style属性设置的,按照我的理解,css和style属性虽然都可以对页面元素进行渲染,但是两者的地位是不一样的。(以下含推测成分)
当页面加载时,css和style对渲染树产生了作用,都会影响元素的变现,不同的地方在于style是元素的属性,用户设置了什么就应该保存什么,就想一个烙印深深烙在了特定元素上,所以当body通过style设置‘-webkit-transform'时,我们可以通过document.body.style.webkitTransform 原样获取设置的值。也许你会有疑问,那直接获取css设置的值不就好了嘛。但我觉得这是做不到的(除去解析css文件的方法),因为css文件被加载完,形成渲染树后它的任务就完成了,css和style所产生的最终对元素进行渲染的规则都可以通过window.getComputedStyle(element) 找到。通过这个方法我们可以看到,transform最终产生的渲染规则是以矩阵maxrix(x,x,x,x,x)的形式保存的(也许是方便计算机的运算),
这就解释了为什么$('body').css('-webkit-transform') 这货会返回矩阵了,而且也看出了$().css()方法是从浏览器最终渲染规则中返回结果的(就是window.getComputedStyle(element)),所以它是读取不了你的css设置参数的,而且当你用$().css()给元素设置样式时,其实它是通过设置元素style属性(内联)设置的,试试你就知道了。虽然这个$().css()有‘css'字样,但是它和‘css文件'没有半毛钱关系,或许这就能证明上面我说的:‘不能直接获取css设置的值'吧。
总结:
1.css和style共同作用渲染树,且style设置的值会原样保存为元素的style属性的子属性,最终渲染规则可以通过window.getComputedStyle(element) 找到
2.jq$().css()方法获取的是最终渲染规则,设置的是style属性(内联样式)
建议:
1.当我们需要实时获取并修改元素transform各参数的时候(例如用translate实现各种滑动效果),应该把transform设置成元素的内联属性(通过style设置),这样方便读取
2.矩阵虽吓人,但若不想成为平凡的页面仔,还是需要搞懂
以上所述就是本文的全部内容了,希望大家能够喜欢。
猜你喜欢
- 什么是合并多行字符串(连接字符串)呢,例如: SQL> desc test; Name Type Nullable Default C
- 1、块级作用域想想此时运行下面的程序会有输出吗?执行会成功吗?#块级作用域if 1 == 1: name = "lzl"
- 导语嘿!大家好,我是木木子!今天给大家带来一个好玩儿的Python小程序,希望大家喜欢,记得点点关注啦~有没有什么内容形式,比小视频更小,比
- 本文实例讲述了Python3.4类型判断,异常处理,终止程序操作。分享给大家供大家参考,具体如下:python3.4学习笔记 类型判断,异常
- OS模块import os1.返回操作系统类型 :posix 是linux操作系统,nt 是windows操作系统print(os.name
- Matplotlib配置了配色方案和默认设置,主要用来准备用于发布的图片。有两种方式可以设置参数,即全局参数定制和rc设置方法。查看matp
- 网上大部分的免费asp程序使用的是access数据库。但是access数据库作为一个中小型的单机数据库系统,在承担访问量、数据量大的网站应用
- 一、网络知识的一些介绍 socket 是网络连接端点。例如当你的Web浏览器请求www.jb51.net上的主页时,你的Web浏览器创建一个
- 由于需求没有做好或者客户是外行,不能很好的配合你做好需求,我在使用asp+access的时候非常头疼,遇到数据结构的改动,就必须修改acce
- 1、同级目录下调用若在程序 testone.py 中导入模块 testtwo.py , 则直接使用【import testtwo 或 fro
- 详解 sys.argv关于 sys.argv 可得好好说道说道了。当初我可是被折磨的不要不要的,上一章节我们提到 argv 是获取程序外部的
- 1. axis的基本使用axis常常用在numpy和tensorflow中用到,作为对矩阵(张量)进行操作时需要指定的重要参数之一。设定ax
- 需求描述有时候我们会基于已有数据生成一列在表格中,类似于下面的class BaseSchema(models.Model): ... def
- 今天做visual transformer研究的时候,发现了einops这么个神兵利器,决定大肆安利一波。先看链接:https://gith
- 本文实例讲述了Python List列表对象内置方法。分享给大家供大家参考,具体如下:前言在上一篇中介绍了Python的序列和String类
- 阅读上一片:微软建议的ASP性能优化28条守则(1)技巧 3:将数据和 HTML 缓存在 Web 服务器的磁盘上有时,数据可能太多,无法都缓
- 实战场景在项目实战中,会碰到一种特定的运维场景,对CDN访问进行限制,一般手段是开启 referer 防盗链,开启 IP黑白名单,开启UA黑
- 方法1:加关键字 DISTINCT在mysql中,可以利用“SELECT”语句和&ldquo
- 假设有一名为"addnewuser"的存储过程,其内容如下:Create PROCEDURE dbo
- 实例的背景说明假定一个个人信息系统,需要记录系统中各个人的故乡、居住地、以及到过的城市。数据库设计如下:Models.py 内容如下:&nb