Javascript Output as Plain Value for Inline Style

Question

I want to write the viewport width into a div inline style like so.

<div style="width:[viewportwidth]">stuff here</div>

The inline style should change as the viewport changes i.e. if I adjust the browser width, the style will change accordingly, in real-time.

I have some js that writes the viewport, but it requires an ID for document.write and thus some HTML element with that ID. I cannot figure out how to just get the viewport width in real time as the value so it can be used in a style.

Donnie D'Amato · Accepted Answer · 2015-12-24 02:22:46Z

1

window.addEventListener('resize', function(event){
  var viewportWidth = this.outerWidth;
});

Then you can just apply the viewportWidth variable to the div's style attribute.

However, this would probably be better done with CSS vw units.

div{
   width:100vw;
}

This is 100% the viewport width.

answered Dec 24, 2015 at 2:22

Donnie D'Amato

3,9701 gold badge20 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

Javascript Output as Plain Value for Inline Style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related