javascript pass variable to style

Question

screen_w = window.innerWidth;
screen_h = window.innerHeight;

to get the window deminsions and then set it to a variable. Is there a way to take that variable and then use it in my style?

Such as:

img
{
  width:screen_w;
  height:screen_h;
}

I have tried

<script type="text/javascript"> 
<style>
img..
</style>
</script>

but that doesn't seem to work.. is this even possible or is there some other way to pass a variable?

Thanks in advance.

///Added

Ok so the Link down there ---v

Is discussing making a node that is your "style"

<script type="text/javascript">

var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style'),
    rules = document.createNode('img { width:screen_w; height:screen_h; }');

style.type = 'text/css';
if(style.styleSheet)
    style.styleSheet.cssText = rules.nodeValue;
else style.appendChild(rules);
head.appendChild(style);

</script>

so then for my html I just have to insert my picture.

<img src="slide1.jpg">

but its still not quite passing somehow.

I can however get the "document.getElementById to work. Is there a way to do this without a button.. like onLoad()?

function changeSize()
{
document.getElementById("picture").height= screen_h;
document.getElementById("picture").width= screen_w;
}
</script>

</head>

<body>

<img id="picture" src="slide1.jpg" width="300" height="98" />
<br /><br />
<input type="button" onclick="changeSize()" value="Change size of image" />

Could perhaps use js to create a new style element with the desired css? (this is just speculation) — geekchic, May 26 '11 at 19:50

score 3 · Answer 1 · answered May 26 '11 at 19:47

3

You can't pass variables to CSS.

You can, however, use javascript directly to change the image style (including dimensions).

answered May 26 '11 at 19:47

Oded

489,969
99
883
1,009

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

You can use JS to modify CSS, see this question:

How to create a <style> tag with Javascript

edited May 23 '17 at 12:04

Community

1
1

answered May 26 '11 at 19:51

ADW

4,030
17
13

score 0 · Answer 3 · answered Aug 31 '21 at 08:28

<script >
window.onload = function() {
    $.ajax({url: "api/<route-name>", success: function(result){
        console.log(result.data[16]['value']);
        document.documentElement.style.setProperty('--my-variable-name', result.data[14]['value']);
    }});
}

<style>
.gender_radio .radio-list .is-checked {
    background-color: var(--my-variable-name) !important;
}

javascript pass variable to style

3 Answers3

Linked