Generating CSS Media Queries with JavaScript or Jquery

Generating CSS media queries with javascript or jQuery

You can just update an existing <style> element (or create one) textContent to contain the rule, which will make it effective in the given context.

document.querySelector('style').textContent +=
    "@media screen and (min-width:400px) { div { color: red; }}"

http://jsfiddle.net/vfLS3/

How to change media query CSS with jQuery

You can use jQuery (window).resize() function, it will triggers when the browser window is resized.

Here's an example using jQuery, javascript and css to handle resize events.
(css if your best bet if you're just stylizing things on resize (media queries))
http://jsfiddle.net/CoryDanielson/LAF4G/

Use this code for the solution you needed.

$(window).resize(function(){
    if ($(window).width() <= 1024){ 
        $('.banner').css('background-image', 'url(' + imageUrl + ')');
    }   
});

Hope this help you out.

How to trigger media Queries in javascript for style.width

if($(window).width() < 601) { 
    // change functionality for smaller screens
} else { 
    // change functionality for larger screens
}e

if(window.matchMedia('(max-width: 600px)').matches)
{
    // do functionality on screens smaller than 600px
}

Add CSS style and media queries to dynamically generated HTML table with JavaScript

I was trying to create a simple responsive table in CSS. The example code I found required the header labels to be hardcoded on the <td></td> tags. But I wanted a way to dynamically label the <td></td> tags with the table headers content when the window resizes.

Since I am new to CSS and JS, I had no idea of accessing the content attribute of an HTML element. @Immaculata's answer gave me a hint.

See working code below.

CSS: defined within the @media screen and (max-width: 600px)

table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

HTML and JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://unpkg.com/read-excel-file@4.x/bundle/read-excel-file.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="input" />
    <table>
      <caption>
        Table Title
      </caption>
    </table>
    <script>

      var input = document.getElementById("input");
      input.addEventListener("change", function () { 

        //Code to populate the HTML table goes here...

    });

      const mediaQuery = window.matchMedia("(max-width: 600px)");
      mediaQuery.addListener(onWindowChanged);

      function onWindowChanged(e) {
        if (e.matches) {
          const dataTable = document.querySelector("table");
        const thElements = dataTable.querySelectorAll("thead th");
        const tdLabels = Array.from(thElements).map((element) => element.innerText);
        dataTable.querySelectorAll("tbody tr").forEach((tr) => {
          Array.from(tr.children).forEach((td, index) =>
            td.setAttribute("data-label", tdLabels[index])
          );
        });
        }
      }
     
    </script>
  </body>
</html>

Generating CSS Media Queries with JavaScript or Jquery