I know there are a lot of posts about this, but I can't find an answer to my specific problem.
I would like to make a JS variable the value of an HTML attribute:
<script> var screenWidth = screen.width </script>
<img src="images/title.png" width="VARIABLE HERE" style="margin-top: 3%"`
"VARIABLE HERE" is where I would want the screenWidth variable to go. What is the best of going about this?
This should work:
<script>var screenWidth = screen.width;</script>
...
<img src="images/title.png" onload="this.width=screenWidth;" style="margin-top: 3%">
Give the tag an id.
i.e. <img id="xxxx" ...>
Then use
document.getElementById('xxx').setAttribute('width', 'somevalue')
See setAttribute
Or use JQuery as the other poster noted
You can add the style using javascript to particular element like this.
script
document.getElementById('myImg').style.width = screen.width + "px";
Html
<img id="myImg" src="images/title.png" style="margin-top: 3%">
Here is a demo
You can't simply call a JavaScript variable inside your HTML. You'll need to have it written by JavaScript or JQuery. You can do it this way :-
<input id="myInput" .../>
<script>
var myVar = "value";
$("#myInput").attr("name", myVar);
</script>
In this case, you could set the width to either 100vw using CSS (possibly via the style attribute: style="width: 100vw;". This is more efficient and more readable, but isn't supported in some old browsers.
