如何在保留其他值的同时设置一个单独的transform值? [英] How to set a single value of transform while leaving the other values?

问题描述

如果您的元素包含许多要转换的值，如何只更改其中一个值而又不更改其他值?

If you have an element with many values for transform how do you change just one of those values without changing the other values?

您每次都可以重写它们，但是在某些情况下，这意味着您必须将css解析为转换成不同的部分.例如:

You could rewrite them every time but in some situations that means you will have to parse apart the css for the transform into its different parts. For example:

-webkit-transform:rotateY(45deg) rotate(45deg);

您将必须获取rotate和rotateY的属性和值.难道没有一种方法可以在不更改rotateY值的情况下进行旋转设置吗?

you would have to get the property and value for rotate and rotateY. Isn't there a way to get and set just rotate without changing the value for rotateY?

在此处中说明了该问题.

推荐答案

无法直接修改转换的单个组件.可悲的是，各种可能的转换都被实现为transform属性上的值，而不是属性本身. CSS属性值没有对象模型-就JavaScript而言，属性值始终只是一个字符串.如果将transform视为例如transform-rotate-y，transform-*等的简写属性，那将是很好的，就像background是所有background-*属性的简写属性一样.这样，我们就可以通过JavaScript直接访问值，但是它不是那样实现的，所以我们很不走运.

There is no way to directly modify a single component of the transform. Sadly, the various possible transforms were implemented as values on the transform attribute, rather than attributes themselves. There is no object model for CSS attribute values - attribute values are always just a string, as far as JavaScript is concerned. It would've been nice if transform was treated as a shorthand attribute for, eg, transform-rotate-y, transform-*, etc, the same way that background is a shorthand attribute for all the background-* attributes. This would've allowed us direct access to the values via JavaScript, but it was not implemented that way, so we are out of luck.

编辑:最简单的方法(无需研究规范并进行大量数学运算)是

The simplest way to accomplish this (without studying the spec and doing a bunch of math) would be to nest your elements, applying different transformations to each. If you apply several transformations that won't change, go ahead and combine those on to one element. Any transformation that you do want to change, use a separate element:

在这里工作: jsfiddle.net/mkTKH/15

编辑:我下面的原始解决方案不起作用.在测试中，我发现getComputedStyle()将转换转换为matrix(). 规范的早期草案说:

My original solution below won't work. In testing it out I discovered that getComputedStyle() converts the transform into a matrix(). An early draft of the spec says:

transform 属性getComputedStyle返回的样式对象的包含单个CSSTransformValue，其类型为CSS_MATRIX. 6个参数代表3x2矩阵，该矩阵是应用

The transform property of the style object returned by getComputedStyle contains a single CSSTransformValue with a type of CSS_MATRIX. The 6 parameters represent the 3x2 matrix that is the result of applying the individual functions listed in the transform property.

---

---

因此，您必须对其进行解析.如果只想更改属性值的一部分，则可以使用正则表达式来解析该值:

So, you have to parse it. If you want to change just one portion of an attribute value, you can use a regular expression to parse the value:

var rotateY = "rotateY(" + deg + "deg)";
var transform = el.style.webkitTransform.replace(/\brotateY([^)]+)\b/, rotateY);
el.style.webkitTransform = transform;

我将创建一个可重用的函数:

I'd create a reusable function:

function setTransformValue(el, name, value) {
    var currentValue = new RegExp(name + "([^)]+)");
    var style = window.getComputedStyle ? getComputedStyle(el) : el.currentStyle;
    var currentTransform = style.transform ||
                           style.webkitTransform ||
                           style.MozTransform ||
                           style.msTransform ||
                           style.OTransform;
    var transform;
    if (currentValue.test(currentTransform )) {
        transform = currentTransform.replace(currentValue, name + "(" + value + ")");
    }
    else {
        transform = currentTransform + " " + name + "(" + value + ")";
    }
    el.style.transform = transform;
}

未经测试.

这篇关于如何在保留其他值的同时设置一个单独的transform值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！