-1

I am having a problem with a JavaScript driven web app, I want the user to change the size of a div using a slider but the problem is that the media queries of CSS do not apply on the width of a div so is there any way using JavaScript or CSS to apply CSS media queries on the width of a div and not on the width of the entire window???

AXJ_X
  • 1
  • 2
  • 1
    can you post some code, its hard to understand without code – Developer Aug 16 '18 at 16:04
  • You need to change the div width with js, not media query – Huangism Aug 16 '18 at 16:04
  • Media queries are designed for changing styles based on browser width. You are trying to change the width of a div based on a slider which requires javascript. Knowing that, I suggest you give it a try and come back when you run into a specific issue with the js code – Huangism Aug 16 '18 at 16:15

2 Answers2

0

In javascript, there are properties called innerWidth, innerHeight, outerHeight, and outerWidth for window object. For HTML elements, there's offsetHeight and offsetWidth. You can use templating in javascript for automatic resizing of width and height in CSS, like so:

HTMLElement.style.width = window.innerWidth + 'px'

jstarnate
  • 319
  • 3
  • 15
0

Without seeing your code, it is hard to say. However, contextually you can just update an existing <style> element textContent to contain what you are after.

Something like this:

document.querySelector('style').textContent +=
    "@entire window and (inner-width:400px) { div { color: blue; }}"

Obviously, you need to update the above code to fit your code (I just gave the syntax essentially).

Let me know your results.

JKimbrough
  • 226
  • 1
  • 8
  • 1
    You misread the question, the OP thought media query can be applied to a div instead of an entire page which is not what media queries are designed for – Huangism Aug 16 '18 at 16:13
  • @Huangism Oh I see - I did not consider OP was focused on applying to DIV - yes of course media queries are not designed for that purpose...Thanks for the feedback! – JKimbrough Aug 16 '18 at 16:19