Change CSS class properties with jQuery

by

You can’t change CSS properties directly with jQuery. But you can achieve the same effect in at least two ways.

Dynamically Load CSS from a File

function updateStyleSheet(filename) {
    newstylesheet = "style_" + filename + ".css";

    if ($("#dynamic_css").length == 0) {
        $("head").append("<link>")
        css = $("head").children(":last");

        css.attr({
          id: "dynamic_css",
          rel:  "stylesheet",
          type: "text/css",
          href: newstylesheet
        });
    } else {
        $("#dynamic_css").attr("href",newstylesheet);
    }
}

The example above is copied from:

Dynamically Add a Style Element

$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');

The example code is copied from this JSFiddle fiddle originally referenced by Alvaro in their comment.

More Related Contents:

  1. Hide/Show div on specific page with jquery
  2. How to apply inline and/or external CSS loaded dynamically with jQuery
  3. Add and remove a class on click using jQuery?
  4. What are the drawbacks of using synchronous ajax call?
  5. Pass array to ajax request in $.ajax() [duplicate]
  6. Pass request headers in a jQuery AJAX GET call
  7. TypeError: $.ajax(…) is not a function?
  8. jQuery loop over JSON result from AJAX Success?
  9. $(window).width() not the same as media query
  10. jQuery posting valid json in request body
  11. How to automatically change the text size inside a div?
  12. Update div with jQuery ajax response html
  13. jQuery toggle CSS?
  14. How do I know if jQuery has an Ajax request pending?
  15. How do I get the HTTP status code with jQuery?
  16. Reload table data in Django without refreshing the page
  17. How to make Bootstrap carousel slider use mobile left/right swipe
  18. How to expand ‘select’ option width after the user wants to select an option
  19. How to Call Controller Actions using JQuery in ASP.NET MVC
  20. What does autocomplete request/server response look like?
  21. How do you select elements based on their style?
  22. Google Map v3 auto refresh Markers only
  23. Populate Select box options on click with Javascript/Jquery with Json data
  24. Apply CSS to jQuery Dialog Buttons
  25. AJAX Post of JavaScript String Array to JsonResult as List Always Returns Null?
  26. Invoke ColdFusion function using AJAX
  27. Use jQuery to Detect Container Overflow?
  28. jquery nested ajax calls formatting
  29. jQuery send HTML data through POST
  30. My Own Like Button: Django + Ajax — How?

Leave a Comment