in CSS3 und Javascript umwandeln-PHP开发-php.cn

in CSS3 und Javascript umwandeln

高洛峰

Freigeben： 2016-11-30 16:23:03

Original

1639 Leute haben es durchsucht

In JavaScript entspricht WebkitTransform in etwa transform . transform ist Standard und WebkitTransform ist für Webkit-Browser verfügbar. WebkitTransform in js entspricht dem Attribut -webkit-transform in CSS.

Das Transformationsattribut in CSS wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

Schauen Sie sich zunächst einen Code an, der das Div nicht verschiebt:

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
        }
    </style><div id="hovertreetf">这是一个div，没有移动。何问起</div>

Nach dem Login kopieren

Das Transformationsattribut in CSS kann das Div verschieben. Beispiel:

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
            transform: translateX(100px);
        }
    </style><div id="hovertreetf">这是一个div，使用css属性transform移动。何问起</div>

Nach dem Login kopieren

wobei transform:translateX(100px) bedeutet, dass sich das div-Element mit der ID hovertreetf horizontal um 100 Pixel nach rechts bewegt.

Sie können auch js verwenden, um das Transformationsattribut zu bedienen und das Div zu verschieben. Der Effekt ist der gleiche wie bei der Verwendung von CSS oben. Zum Beispiel:

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
        }
    </style><div id="hovertreetf">这是一个div，使用js操作transform移动。何问起</div>
    <script>
        document.getElementById("hovertreetf").style.transform = "translateX(100px)";
    </script>

Nach dem Login kopieren

Wie oben erwähnt, entspricht WebkitTransform in etwa der Transformation und ist für Webkit-Browser geeignet. Die Verwendung von js zum Betrieb von WebkitTransform kann auch dazu führen, dass Divs verschoben werden. Zum Beispiel:

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
        }
    </style><div id="hovertreetf">这是一个div，使用js操作WebkitTransform移动。何问起</div>
    <script>
        document.getElementById("hovertreetf").style.WebkitTransform = "translateX(100px)";
    </script>

Nach dem Login kopieren

WebkitTransform entspricht dem Attribut -webkit-transform in CSS, zum Beispiel:

<style>
        #hovertreetf {
            border: 1px solid red;
            width: 120px;
            height: 120px;
            -webkit-transform: translateX(100px);
        }
    </style><div id="hovertreetf">这是一个div，使用css属性 -webkit-transform 移动。何问起</div>

Nach dem Login kopieren

Wenn Sie nur CSS verwenden, um die Transformation festzulegen, js jedoch nicht Wenn Sie es festlegen, erhält js das Transformationsattribut. Der Wert ist leer, zum Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>关于css设置transform然后用js获取的代码_何问起</title>
    <meta charset="utf-8" />
    <style>
        #hovertreetf {border: 1px solid red;width: 120px;height: 120px;transform: translateX(100px);}
        #hovertreereusult{border:1px solid green;min-height:40px;margin:5px 0px;}
    </style>
</head>
<body>
    <div id="hovertreetf">这是一个div，使用css属性transform移动。js获取transform值为空。何问起</div>
    <div id="hovertreereusult"></div>
    <input type="button" value="获取transform属性值" id="hovertreeget" />
    <script>
        document.getElementById("hover"+"treeget").addEventListener("click", function () {

            var h_transformValue = document.getElementById("hovertreetf").style.transform;

            //如果获取到的是空字符串，则修改为文字：空
            if (h_transformValue == "")
                h_transformValue = "空";

            document.getElementById("hovertreereusult").innerText = "上面div的transform属性值为："+h_transformValue;
        })
    </script>
</body>
</html>
体验效果：http://hovertree.com/texiao/javascript/3/6.htm

如果先使用js设置了transform的值，则js可以获取到所设置的值。例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>关于js设置transform然后用js获取的代码_何问起</title>
    <meta charset="utf-8" />
    <style>
        #hovertreetf {border: 1px solid red;width: 120px;height: 120px;}
        #hovertreereusult{border:1px solid green;min-height:40px;margin:5px 0px;}
    </style>
</head>
<body>
    <div id="hovertreetf">这是一个div，使用js设置transform使它移动。js可获取所设置的transform值。何问起</div>
    <div id="hovertreereusult"></div>
    <input type="button" value="获取transform属性值" id="hovertreeget" />
    <script>
        document.getElementById("hovertreetf").style.transform = "translateX(50px)";

        document.getElementById("hover"+"treeget").addEventListener("click", function () {
            var h_transformValue = document.getElementById("hovertreetf").style.transform;

            //如果获取到的是空字符串，则修改为文字：空
            if (h_transformValue == "")
                h_transformValue = "空";

            document.getElementById("hovertreereusult").innerText = "上面div的transform属性值为："+h_transformValue;
        })
    </script>
</body>
</html>

Nach dem Login kopieren