Change CSS' media queries through javascript

Question

Is there a way to change a website's actual media queries through javascript ?

I'm developping an app contained in an iframe on my client's websites who recalculate body's width to place a panel in the right side. When the browser is resized, the client's media queries are called and act without taking my iframe into consideration resulting in a messed up layout.

Do you see a way for me to change the clients media queries with javascript so that I can keep the layout clean ?

Thanks for your help !

I just have a tag on the website, so I can only do Javascript — Raph, Jul 17 '14 at 14:42
Maybe there's a way of fixing it without changing the media queries. Can you post an image showing the problem (how is the layout messed up)? — parchment, Jul 17 '14 at 14:50
The Same Origin Policy prevents pages from accessing contents of an Iframe of a different domain. You probably can't do what you intend. — Diodeus - James MacFarlane, Jul 17 '14 at 14:57

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

In this question there's an example of how load css files dynamicly with javascript. You could combine this with removing the original stylesheet via jquery, like:

$("link[rel='stylesheet']").remove()

and reload the same css file but with another media (your new media query).

edited May 23 '17 at 12:13

Community

1
1

answered Jul 17 '14 at 15:00

Everton Leite

77
6

score 0 · Accepted Answer · edited May 23 '17 at 12:01

0

I found the answer here : https://stackoverflow.com/a/19593526/1324357 We can go to css with document.styleSheets.

edited May 23 '17 at 12:01

Community

1
1

answered Jul 17 '14 at 19:36

Raph

374
1
16

Change CSS' media queries through javascript

2 Answers2