Can I use variable values acquired with Javascript in my css file?

Question

I have three separate files for my program/application: html, CSS and JavaScript. I need to make an object move to a certain place using CSS animation (JavaScript is not allowed). However, the destination of the object changes, which is why I used JavaScript to get the current coordinates:

var x = $('#correct > span:empty').offset();

Now, I can use the acquired coordinates in JavaScript, using x.left and x.top. However, because I'm only allowed to use CSS animation, I would need to use the coordinates in my CSS file. This is why I need Your help.
Is it possible to do that? If so, how? This is what I have written in my CSS file for the object (span):

p > span {
   background-color: white;
   box-shadow: inset 0 0 10px #999;
   height: 2.5em;
   width: 2.5em;
   display: inline-block;
   margin: 5px;
   border-radius: 10px;
   text-align: center;
   line-height: 2.5em;
   vertical-align: middle;
}

Now, the object span has to move animatedly to '#correct > span:empty' (and I've already gotten the coordinates of that one with JS).
I have thought of using transition, but I still don't know if or how I can use the coordinates.
Can You please help me?

Can you use the jQuery .css() function to change the CSS dynamically? — Barmar
– Barmar, Commented Oct 13, 2013 at 17:30

Larkenshine · Accepted Answer · 2018-04-02 18:37:49Z

As Barmar stated, I believe changing your CSS dynamically would be your best best. Some other options would be to use server-side PHP. If you have already calculated your javascript client-side, you could use AJAX to request get_css.php?location=<your_wanted location>

Server side, you could echo your CSS, plus the parameter $_GET['location'].

EDIT: I realize that my response was really vague. Let me give you an example:

Say I want to move a paragraph to the left by an unknown amount, given by the user; using a transition. Since Javascript is not allowed, I'm using PHP to on-the-fly alter the CSS that gets echo'd to the page. See the example here. Here's what the code looks like:

index.html:

<!DOCTYPE html>
<html>

        <head>

                <title>EXAMPLE</title>

        </head>

        <body>

                <form action="animate.php" method="post">

                        <input type="text" name="amount" placeholder="Put a number (1-100) here!" style="min-width: 40%;"></input>
                        <input type="submit" value="Submit">

                </form>

        </body>

</html>

animate.php:

<?php

    $amount = $_POST['amount'];

?>


<!DOCTYPE html>
<html>

        <head>

        <title>EXAMPLE</title>

        <style>

            #moveMe{

                position: absolute;
                top: 0;
                left: <?php echo $amount ?>%;
                animation-name: moveLeft;
                animation-duration: 4s;

            }

            @keyframes moveLeft{

                from{
                    left: 0%;
                }
                to{
                    left: <?php echo $amount ?>%;
                }

            }

        </style>

        </head>

        <body>

        <p id="moveMe">I'm moving!</p>

        </body>

</html>

Collectives™ on Stack Overflow

Can I use variable values acquired with Javascript in my css file?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related