17

変換する値が多い要素がある場合、他の値を変更せずに、これらの値の1つだけを変更するにはどうすればよいですか？

毎回書き直すこともできますが、状況によっては、cssを解析して別の部分に変換する必要があります。例えば：

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

rotateとrotateYのプロパティと値を取得する必要があります。rotateYの値を変更せずにrotateだけを取得して設定する方法はありませんか？

問題はここに示されています。

4

5 に答える 5

11

変換の 1 つのコンポーネントを直接変更する方法はありません。残念なことに、可能なさまざまな変換はtransform、属性自体ではなく、属性の値として実装されていました。CSS 属性値のオブジェクト モデルはありません。JavaScript に関する限り、属性値は常に単なる文字列です。すべての属性の省略形の属性と同じように、 、 などtransformの省略形の属性として扱われるとよいでしょう。これにより、JavaScript を介して値に直接アクセスできるようになりますが、そのように実装されていないため、うまくいきません。transform-rotate-ytransform-*backgroundbackground-*

編集： これを達成する最も簡単な方法は（仕様を調べたり、たくさんの計算をしたりせずに）、要素をネストして、それぞれに異なる変換を適用することです。変更されない複数の変換を適用する場合は、先に進み、それらを 1 つの要素に結合します。変更したい変換は、別の要素を使用します。

ここで動作します: jsfiddle.net/mkTKH/15

編集:以下の元のソリューションは機能しません。それをテストしたところgetComputedStyle()、変換を に変換することがわかりましたmatrix()。仕様の初期草案には次のように書かれています。

transformによって返されるスタイル オブジェクトのプロパティにはgetComputedStyle、CSS_MATRIX 型の単一の CSSTransformValue が含まれます。6 つのパラメーターは、プロパティにリストされている個々の関数を適用した結果である 3x2 マトリックスを表しtransformます。

したがって、それを解析する必要があります。属性値の一部だけを変更する場合は、正規表現を使用して値を解析できます。

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

再利用可能な関数を作成します。

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;
}

未テスト。

于 2012-12-07T19:55:52.830 に答える
5

したがって、@gilly3 は、実際にはできないということで正しかったのですが、それを偽造する方法を次に示します。

  1. オブジェクトの現在の値を記憶する
  2. そのオブジェクトの値の一部を変更します。
  3. オブジェクトを文字列に変換する関数を用意します。
  4. 文字列を適用します。
コード例 
var el = document.getElementById('blablabla');
var transform = {
     rotate: 45,
     rotateY: 45
}

function getTransform() {
    var str = '':
    for (var key in transform) {
        str += key + '(' + transform[key] + 'deg)'
    }
    return str;
}

function applyTransform() {
    var transform = getTransform();
    el.style.webkitTransform = el.style.mozTransform = el.style.transform = transform;
}

function rotateABit() {
    transform.rotate += 20;
    applyTransform();
}
于 2012-12-07T21:02:33.000 に答える
-1

フィドル

var spinner = (function transform() {
    var rotateX = 0;
    var rotateY = 0;
    var rotateZ = 0;

    var translateX = 0;
    var translateY = 0;
    var translateZ = 0;

    var scaleX = 1;
    var scaleY = 1;
    var scaleZ = 1;

    function transform(props) {
        rotateX = props.rotateX ? props.rotateX : rotateX;
        rotateY = props.rotateY ? props.rotateY : rotateY;
        rotateZ = props.rotateZ ? props.rotateZ : rotateZ;

        translateX = props.translateX ? props.translateX : translateX;
        translateY = props.translateY ? props.translateY : translateY;
        translateZ = props.translateZ ? props.translateZ : translateZ;

        scaleX = props.scaleX ? props.scaleX : scaleX;
        scaleY = props.scaleY ? props.scaleY : scaleY;
        scaleZ = props.scaleZ ? props.scaleZ : scaleZ;

        var css = "";
        css += "rotateX(" + rotateX + "deg) ";
        css += "rotateY(" + rotateY + "deg) ";
        css += "rotateZ(" + rotateZ + "deg) ";
        css += "translateX(" + translateX + "px) ";
        css += "translateY(" + translateY + "px) ";
        css += "translateZ(" + translateZ + "px) ";
        css += "scaleX(" + scaleX + ") ";
        css += "scaleY(" + scaleY + ") ";
        css += "scaleZ(" + scaleZ + ") ";

        spinner.Spinner.css("-webkit-transform", css);
    }
    return {
        Spinner: $("#spinner"),
        Transform: transform
    }
})();
于 2012-12-07T22:20:31.857 に答える