How To Change or Restore Your CSS Using jQuery


Change or Restore Your CSS Using jQuery

This Article Is About Change or Restore Your CSS Using jQuery The jQuery .css() method is an easy way to change the CSS of any HTML element, class, or ID without actually having to edit any of your stylesheets. The syntax for the .css() method is actually quite simple and somewhat similar to how your styles would appear in your stylesheets.

If you’re using the .css() method to only add one new style rule to your HTML, the syntax should be like this:

$(“element”).css(“property name”, “property value”);

If you’re trying to change the styling of more to one element, the syntax will differ slightly:

$(“element”).css({“property name”:”property value”, “property name”:”property value”, “property name”:”property value”});

In the example below, let’s change the font-size and color of this header tag:

Screen Shot 2016-08-25 at 10.59.08 AM

Here’s the code:

$(document).ready(function(){

$(‘h3’).css({“font-size”:”28px”, “color”:”#7fffd4″});

})

The results should show an increased font-size and would change the color to a bright minty green, like this:

Screen Shot 2016-08-25 at 11.01.09 AM

After implementing the solution from the website mentioned above, I could switch to desktop view from mobile devices. However, I wanted to leave an option for going back to mobile view on the requested desktop version. I wanted this button to show up only on the desktop view requested on a mobile device and not on computers, since that would mess up my footer with an obsolete button. So I added some actions to the jQuery document which change the CSS values upon switching from mobile to desktop view.
The problem is that after switching back to mobile view the browser remembers the jQuery modified CSS values and displays the footer incorrectly. I don’t know how the syntax should look for resetting the default CSS values upon hitting the ‘Switch back to mobile view’ button.

Here’s my code:

  1. (function() {
    // viewport stuff
  2. var targetWidth = 1200;
  3. var deviceWidth = ‘device-width’;
  4. var-viewport = $(‘meta[name=”viewport”]’);
  5. // check to see if local storage value is set on page load
  6. localStorage.isResponsive = (localStorage.isResponsive == undefined) ? ‘true’ : localStorage.isResponsive;
  7. var showFullSite = function(){
  8. localStorage.responsiveViewportValue = viewport.attr(‘content’);
  9. viewport.attr(‘content’, ‘width=’ + targetWidth);
  10. if(!$(‘.rwd-display-options #view-responsive’).length){
  11. $(‘.rwd-display-options’).append(‘<span id=”view-responsive”>Switch back to mobile view’.</span>’);
  12. // CSS adjustments
  13. $(“.ftext”).css(“margin-top”, “13px”);
  14. $(“.footer”).css(“height”, “75px”);
  15. $(“.wrapper”).css(“margin”, “0 auto -75px”);
  16. $(“.intas”).css(“top”, “21px”);
  17. }
  18. localStorage.isResponsive = ‘false’;
  19. }
  20. var showMobileOptimized = function(){
  21. localStorage.isResponsive = ‘true’;
  22. viewport.attr(‘content’, localStorage.responsiveViewportValue);
  23. }
  24. })(jQuery);
I’m more of a designer than coder but tried to describe the problem as simple as possible so I hope you can understand.

Leave a Reply

Your email address will not be published. Required fields are marked *