如何将div的旋转信息转换为js中的变量

时间：2018-10-10 09:07:37

标签： javascript html if-statement 

var schakkel = document.getElementById('schakkelaar').style.transform;
if (90 < schakkel && schakkel < 140){
    console.log('it workssss');


}
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
body{
    background-color: #F7F7F7;
}
#border-buiten-tekst1 {
    font-family: 'Raleway', sans-serif;
    margin-left: 32.5vw;
    margin-top: -3vw;
    border: solid;
    position: absolute;
}
#flex-container-pijlen {
    position: absolute;
    display: flex;
    margin-left: 30vw;
    margin-top: -3.2vw;
}
#pijl-links {
    width: 3.5vw;

}
#pijl-rechts {
    width: 3.5vw;
    margin-left: 15vw;
    margin-left: 22vw;
}
#gloeilamp {
    margin-left: 65vw;
    max-width: 5vw;
    max-height: 5vw;
    position: absolute;
}

#schakkelaar2 {
    margin-left: 55.7vw;
    margin-top: -20vw;
    position: relative;
    transform: rotate(37deg);


}
#schakkelaar {
    margin-left: 35.2vw;
    margin-top: 29.35vw;
    position: relative;
    transform: rotate(37deg);
}
#border-buiten-tekst2 {
    font-family: 'Raleway', sans-serif;
    margin-left: 34.4vw;
    margin-top: 4vw;
    padding-top: .2vw;
    text-align: center;
    width: 20vw;
    border-left: solid;
    border-right: solid;
    border-bottom: solid;
}

.menu-area li a{
    text-decoration: none;
    color: #F7F7F7;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    padding: 0px 25px;
    font-size: 14px;
    line-height: 30px;
    position: relative;
    z-index: 1;
}
.menu-area li{
    list-style: none;
    display: inline-block;
}
.custom-padding{

    padding-top: 20%;
}
nav{
    position: relative;
    padding: 10px 20px 10px 10px;
    text-align: center;
    z-index: 1;
    background: #8CC63E;
    margin: 0 auto;
    width: calc(100% - 60px);
    margin-top: 30px;
}
#border-spel {
    background-image: url("../img/speelveld.png");
    position: absolute;
    margin-left: calc(42vw - 600px);
    margin-top: .5vw;
    width:1320px !important;
    height: 36vw;
}
#border-buiten {
    margin-left: calc( 30vw -  450px );
    margin-top: 4.4vw;
    width: 1650px;
    height: 41vw;
    background-color: #8CC63E;
}
.logo{
    width: 20vh;
    float: left;
    margin-top: -30px;
    margin-left: 10px;
}

.menu-area li a:hover{
    background: #432064;
    color: #F7F7F7;
}
nav:before{
    position: absolute;
    content: '';
    left: 0;
    top: 100%;
    border-top:10px solid #333333;
    border-right:10px solid #333333;
    border-left: 10px solid transparent;
    border-bottom:10px solid transparent;
}

nav:after{
    position: absolute;
    content: '';
    left: 0;
    top: 100%;
    border-top:10px solid #333333;
    border-right:10px solid #333333;
    border-left: 10px solid transparent;
    border-bottom:10px solid transparent;
}

.menu-area h2{
    color:#F7F7F7;
}


.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    background-color: inherit;
    font-family: inherit;
    margin-left: 50px;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #432064;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;

}
<!DOCTYPE html>

<html>
<head>
    <script src="js/js.js"></script>
    <meta charset="UTF-8">
    <meta name="description" content="Stagair local spot">
    <meta name="keywords" content="Technolab, Stagairs, Workshops">
    <meta name="author" content="Ravi Breugom, Alexander Wallaard, Natascha van Baal">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="CSS/style.css" rel="stylesheet" type="text/css">
    <title>Technolab Stagairspot</title>
</head>
<body data-gr-c-s-loaded="true">
<header>
    <div class="custom=padding">
        <nav>
            <a href="../../beveiligd.php"><img class="logo"
                                               src="../../img/WhatsApp%20Image%202018-09-20%20at%2010.44.00.jpeg"
                                               alt="Logo"></a>
            <ul class="menu-area">
                <li><a href="#">Workshops</a></li>
                <li><a href="#">Agenda</a></li>
                <li><a href="#">Leerdoelen</a></li>
                <li><a href="../../Contact/Contact.php">Contact</a></li>
                <div class="dropdown">
                    <li><a class="dropbtn">&#9881;
                            <i class="fa fa-caret-down"></i>
                        </a></li>
                    <div class="dropdown-content">
                        <a href='../../uitloggen.php'>Uitloggen</a>
                        <a><?php

                            session_start();
                            if ($_SESSION['ingelogd'] == "ja") {
                                echo $_SESSION['username'] . "<br>";

                            } else {
                                header("Location: ../../login_form.php");
                            }

                            ?></a>
                    </div>
                </div>


    </div>

</header>
<div id="border-buiten">
    <h1 id="border-buiten-tekst1">Stroom Geeft energy game.</h1>
    <p id="border-buiten-tekst2">het doel van dit spel is om het lampje van stroom te vorzien! lukt het jouw om het
        lampje te laten branden?</p>
    <section id="flex-container-pijlen">
        <img id="pijl-links" alt="pijl-links" src="img/pijl-links.png">
        <img id="pijl-rechts" alt="pijl-rechts" src="img/pijl-rechts.png">
    </section>

    <canvas id="border-spel">


    </canvas>

    <!--spel plaatjes-->
    <div id="gloeilamp">
        <img id="gloei-uit" alt="gloeiaan" src="img/gloeilamp-uit.png"/>
        <img id="gloei-aan" alt="gloeiuit" src="img/gloeilamp-aan.jpg" style="display:none;"/>
    </div>
    <div id="schakkelaar"><img id="target" style="transform: rotate(-126.828deg);" src="img/schakkelaar.png"/></div>
    <script src="./bl.ocks.org_files/rotate.js.download"></script>
    <div id="schakkelaar2"><img id="target2" style="transform: rotate(-126.828deg);" src="img/schakkelaar.png"/></div>
    <script src="./bl.ocks.org_files/rotate2.js.download"></script>


    <footer id="copyright">&copy; Technolab Leiden</footer>
</body>
</html>

大家好，我对此代码有疑问。我正在制作一个简单的js游戏，我需要获取图像的旋转信息，因此，当您在该游戏中旋转图像时，当图像在90至140度之间旋转时，就需要发生一些事情。但是它一直说结果为空，有人可以帮助我吗？我在互联网上到处搜索，但没有找到答案。抱歉，HTML和CSS太乱了，但是当我完成项目时，我总是使代码很好

2 个答案:

答案 0 :(得分：2)

如果您将transform: rotate(50deg)设置为元素

const schakkel = document.getElementById('schakkelaar').style.transform;将返回字符串rotate(50deg)给您。

要获取实际的transform值，您需要使用getComputedStyle：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

然后window.getComputedStyle(schakkel).transform将输出元素matrix(0.996195, 0.0871557, -0.0871557, 0.996195, 0, 0)的矩阵变换

在 CSSTricks 上的这篇很好的文章中了解更多有关如何使用它的信息：https://css-tricks.com/get-value-of-css-rotation-through-javascript/

答案 1 :(得分：1)

这正是您所需要的。 尝试此操作可以删除剩余的度数。 HTML 

<div id="banner-message"; style="transform: rotate(360deg)">

</div>

<script>


let style = $("#banner-message").attr('style');
let pos = style.indexOf("(")+1;
console.log(style.slice(pos, style.lastIndexOf(")")));

</script>
相关问题
最新问题