OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to use variable from javascript in inline css?

  • Thread starter Thread starter Lucas Ardelean
  • Start date Start date
L

Lucas Ardelean

Guest
Trying to call the "color" variable for use in the inline css. I'll replace the "red" output with a function but I need to know how to do this first. Thanks

Code: `

Code:
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var color = "red"
        </script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
        <title>New Tab</title>
        <style>
            .fit {
                max-height: 99vh;
                max-width: 99%;             
            }
        </style>
    </head>
        <body style="color: black" scrolling="no">
            <div class="card text-white" >
                <div style= "text-align: center;">
                    <div id= "someInput" style= "background-color: color;">
                        <img class= "fit";  id="img1" id="i" src="" style= ""/>
                    </div>
                </div>
              
                
    <script src="/randomthing.js"></script>
    <script src="/randomthing2.js"></script>
    <script src="/jquery.3.4.1.js"></script>
    <script src="/background.js"></script>
    
    </body>
</html>

`

Tried to look at other forums but didn't find any solution

<p>Trying to call the "color" variable for use in the inline css. I'll replace the "red" output with a function but I need to know how to do this first. Thanks</p>
<p>Code:
`</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var color = "red"
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<title>New Tab</title>
<style>
.fit {
max-height: 99vh;
max-width: 99%;
}
</style>
</head>
<body style="color: black" scrolling="no">
<div class="card text-white" >
<div style= "text-align: center;">
<div id= "someInput" style= "background-color: color;">
<img class= "fit"; id="img1" id="i" src="" style= ""/>
</div>
</div>


<script src="/randomthing.js"></script>
<script src="/randomthing2.js"></script>
<script src="/jquery.3.4.1.js"></script>
<script src="/background.js"></script>

</body>
</html>
</code></pre>
<p>`</p>
<p>Tried to look at other forums but didn't find any solution</p>
 

Latest posts

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top