CODEWITHSUNDEEP
javascripthtmlif-statement
Alexander Wallaard
Alexander Wallaard

Reputation: 13

how to get the rotation info of a div into a variable in js

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>

ey everyone, i have a question about this code. i am making a simple js game, i need to get the rotation info of a image, so when you rotate the image in that game then something needs to happen when the image is being rotated between 90 and 140 degrees. But it keeps saying that the result is null, can anybody help me? i searched everywhere on the internet but i didn't found an answer. Sorry that the HTML & CSS is messy but i always make the code nice when i finished the project

Upvotes: 0

Views: 261

Answers (2)

rakesh shrestha
rakesh shrestha

Reputation: 1435

Here is the exactly what you need. Try this you can remove the remaining deg. 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>

Upvotes: 1

t3__rry
t3__rry

Reputation: 2849

If you set transform: rotate(50deg) to your element

const schakkel = document.getElementById('schakkelaar').style.transform; will return the string rotate(50deg) to you.

What you need to if you want to get the actual transformvalue is to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Then window.getComputedStyle(schakkel).transform will output the matrix transform of your element matrix(0.996195, 0.0871557, -0.0871557, 0.996195, 0, 0)

See more on how to use it on this good article at CSSTricks: https://css-tricks.com/get-value-of-css-rotation-through-javascript/

Upvotes: 2

Related Questions