css 是否获取元素的比例值?

m528fe3b  于 2022-11-27  发布在  其他
关注(0)|答案(7)|浏览(167)

我想知道怎样才能得到元素的比例值?
我试过$(element).css('-webkit-transform');,它返回matrix(scaleX,0,0,scaleY,0,0);。有没有办法只得到scaleXscaleY

yhived7q

yhived7q1#

找出文件与元素之间比例系数的最简单解决方案如下:

var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;

这是因为getBoundingClientRect返回实际尺寸,而offsetWidth/Height是未缩放的尺寸。

fjnneemd

fjnneemd2#

如果它是由一个矩阵指定的我猜你不能用一种直截了当的方式,但你可以很容易地解析出这个值:

var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,
    matches = $(element).css('-webkit-transform').match(matrixRegex);

matches[1]将包含scaleX,matches[2]将包含scaleY。如果可能还应用了其他变换,则需要稍微调整正则表达式,因为现在它假定所有其他参数都为0。
一种只获取比例值的方法可能是删除所有转换,测量计算出的元素的宽度/高度,然后将它们加回去并再次测量。然后将新值/旧值相除。我还没有尝试过,但它可能会起作用。jQuery本身使用类似的方法来进行许多测量,它甚至有一个未公开的$.swap()函数专门用于此。
PS:你也在用-o-transform-moz-transform-ms-transform,对吗?

nue99wik

nue99wik3#

如果您只需要针对webkit(因为它是针对iPhone或iPad的),最可靠和快速的方法是使用webkit提供的本地javascript:

node = $("#yourid")[0];
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
alert(curTransform.a); // curTransform is an object,
alert(curTransform.d); // a through f represent all values of the transformation matrix

您可以在此处观看演示:http://jsfiddle.net/umZHA/

6psbrbz9

6psbrbz94#

您可以使用下列程式码:

var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("matrix(", "").split(",");
var scaleX = parseFloat(matrixArray[0]); // convert from string to number
var scaleY = parseFloat(matrixArray[3]);
// bonus round - gets translate values
var translateX = parseFloat(matrixArray[4]); 
var translateY = parseFloat(matrixArray[5]); // parseFloat ignores ")"
7cwmlq89

7cwmlq895#

对OP来说太晚了,但在将来可能会有用。有一个直接的方法使用分裂来完成它:

function getTransformValue(element,property){       
        var values = element[0].style.webkitTransform.split(")");
        for (var key in values){
            var val = values[key];              
            var prop = val.split("(");          
            if (prop[0].trim() == property)
                return prop[1];
        }                   
        return false;           
    }

这是webkit特有的,但可以很容易地扩展到更多的浏览器修改第一行。

u2nhd7ah

u2nhd7ah6#

使用正则表达式

element.style.transform.match(/scale\(([1-9\.])\)/)[1]
7nbnzgx9

7nbnzgx97#

一种更可靠、更通用的方法来获得比例:

const { width, height } = element.getBoundingClientRect()
const scale = { x : element.offsetWidth / width, y : element.offsetHeight / height }

它将可视尺寸与未缩放尺寸进行比较。因此,即使是嵌套的缩放元素,它也可以工作。

相关问题