Parse Javascript variable to CSS variables [duplicate]

Question

Possible Duplicate:
Avoiding repeated constants in CSS

I have a javascript file that I am using to obtain the width and height of the viewport to adjust my site's resolution. I can get these values with javascript, but I don't really know where to go from here. I'd like to send the values to my CSS variables but I have not found a way to do this quickly. Is it possible? Here is my JS code:

<script type="text/javascript">
<!--

  var viewportwidth;
  var viewportheight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

  if (typeof window.innerWidth != 'undefined')
  {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
  }


 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0)
 {
   viewportwidth = document.documentElement.clientWidth,
   viewportheight = document.documentElement.clientHeight
 }


 else
 {
   viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
   viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
   document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

For the CSS I was hoping to get away with something quick and easy but its not working:

@variables{
ViewWidth:'+viewportwidth+';}

@variables{
ViewHeight:'+viewportheight+';}  

html{
max-width: var(ViewWidth);
max-height: var(ViewHeight);}

I am assuming that I have the incorrect syntax within the variable declarations. I wrote it that way to show that I am trying to get the variable value from JS and pass it to CSS.

Javascript is parsed after the css is computed. You need to do this using the javascript style attribute of your element. — Captain Giraffe
– Captain Giraffe, Commented Mar 24, 2011 at 20:05
I'm sorry to break it to you, but you don't have CSS variables. — harpo
– harpo, Commented Mar 24, 2011 at 21:05

Eric Wendelin · Accepted Answer · 2011-03-24 20:31:50Z

3

I think you're looking for something similar to this:

var parentElement = document.documentElement || document.body;
parentElement.style.maxWidth = parentElement.clientWidth + 'px';
parentElement.style.maxHeight = parentElement.clientHeight + 'px';

edited Mar 24, 2011 at 20:31

answered Mar 24, 2011 at 20:12

Eric Wendelin

44.5k9 gold badges73 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jake Kalstad · Accepted Answer · 2011-03-24 20:05:20Z

1

You want to add the css dynamically with the javascript, each element has its style and corresponding elements relating to css, use javascript to manipulate these

myHtmlElement.style.backgroundColor='green';

something along those lines should be fine.

answered Mar 24, 2011 at 20:05

Jake Kalstad

2,0651 gold badge14 silver badges20 bronze badges

2 Comments

smulholland2 Over a year ago

In my case then, body.style.min-width ='+viewportwidth+'; should work?

Jake Kalstad Over a year ago

viewportwidth needs to be a javascript variable, but you can just as easily grab the viewports width property the same way you got the min-width, and set it using that value.

user123444555621 · Accepted Answer · 2011-03-24 20:56:13Z

1

As others mentioned, you can use individual elements' style property. If you want generic rules like .myClass { width: myVar }, you're gonna have to produce the whole CSS rule at runtime:

https://developer.mozilla.org/en/DOM/stylesheet.insertRule

answered Mar 24, 2011 at 20:56

user123444555621

154k27 gold badges118 silver badges126 bronze badges

Collectives™ on Stack Overflow

Parse Javascript variable to CSS variables [duplicate]

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related