{"id":1477,"date":"2012-11-10T14:16:13","date_gmt":"2012-11-10T14:16:13","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1477"},"modified":"2012-11-10T14:16:13","modified_gmt":"2012-11-10T14:16:13","slug":"jquery-css-jquery-css-method-jquery-css-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-css-jquery-css-method-jquery-css-examples\/","title":{"rendered":"jQuery CSS Method Examples"},"content":{"rendered":"<p><em><strong>jQuery CSS<\/strong><\/em> is an easy to use <strong>method<\/strong> available in jQuery for accessing\u00a0the style property from the first matched element, in the set of matched elements. Simply put, if you need to assign a new value via CSS, modify an existing CSS value or need to remove the existing CSS values using jQuery, then <strong>jQuery .css(); method<\/strong> is for you. In this article, I am going to share with you easy ways of using the<strong> .css() method<\/strong> along with relevant examples. Read on to find out more info.<!--more--><\/p>\n<h2>How to use .css() Method in jQuery &#8211; Examples<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1477\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>In order to see how to use the <em><strong>.css() method in jQuery<\/strong><\/em>, let us consider that we have a div and we are going to apply our CSS styles to it. Lets see by means of a simple example, how to do this in different ways. But first, feel free to try the demo. Following the demo, will be the source code followed by specific examples.<\/p>\n<h3>Using .css() method in jQuery to access and manipulate the styles of an element<\/h3>\n<p><strong>Here&#8217;s the HTML + basic jQuery required to get started with our examples:<br \/>\n<\/strong>(Please note that jQuery v.&gt;= 1.7 is required to run the demo using .on() method in jQuery)<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery .css(); Method Examples&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;style type=\"text\/css\"&gt;\n.red {\nborder: 1px solid #FF0000;\nmargin: 10px;\n}\n.green {\nbackground-color: #CEFFCE;\nmargin: 10px;\n}\n\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div class=\"divs_container\"&gt;\n\n&lt;div id=\"mydiv1\" class=\"red\"&gt;\nThis is my 1 div\n\n&lt;\/div&gt;\n\n&lt;\/div&gt;\n\n&lt;input type=\"button\" name=\"sbt_get_class\" id=\"sbt_get_class\" value=\"Get Class\"&gt;\n\n&lt;input type=\"button\" name=\"sbt_set_class\" id=\"sbt_set_class\" value=\"Set\/ReplaceWith Green Class\"&gt;\n\n&lt;input type=\"button\" name=\"sbt_remove_class\" id=\"sbt_remove_class\" value=\"Remove Class\"&gt;\n\n&lt;br&gt;\n&lt;input type=\"button\" name=\"sbt_add_red_class\" id=\"sbt_add_red_class\" value=\"Add Red Class\"&gt;\n\n&lt;input type=\"button\" name=\"sbt_add_green_class\" id=\"sbt_add_green_class\" value=\"Add Green Class with Red Class\"&gt;\n\n&lt;input type=\"button\" name=\"sbt_remove_red_class\" id=\"sbt_remove_red_class\" value=\"Remove Red Class\"&gt;\n\n&lt;br&gt;\n\n&lt;input type=\"button\" name=\"sbt_add_purple_bg\" id=\"sbt_add_purple_bg\" value=\"Add Purple Background\"&gt;\n\n&lt;input type=\"button\" name=\"sbt_add_multiple_css\" id=\"sbt_add_multiple_css\" value=\"Add Multiple CSS\"&gt;\n\n&lt;input type=\"button\" name=\"sbt_chain_css_styles\" id=\"sbt_chain_css_styles\" value=\"Chain CSS styles\"&gt;\n\n&lt;br&gt;\n\n&lt;input type=\"button\" name=\"sbt_reset\" id=\"sbt_reset\" value=\"Reset everything\"&gt;\n&lt;script type=\"text\/javascript\" language=\"javascript\"&gt;\n\n$(document).ready(function(){\n\nvar divs_container_html = $(\".divs_container\").html();\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Following is the jQuery code for the examples:<\/p>\n<h3>Example #1 &#8211; Alert the current class of the div using the .css() method in jQuery<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_get_class').on(\"click\", function(){\n\nalert( $('#mydiv1').attr('class') );\n\n});<\/pre>\n<h3>Example #2 &#8211; Assign\/Set\/Replace Class for a div using the .css() method in jQuery<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_set_class').on(\"click\", function(){\n\n$('#mydiv1').attr('class', 'green');\n\n});<\/pre>\n<h3>Examples #3 &#8211; Remove existing\/all classes of a div\u00a0using the .css() method<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_remove_class').on(\"click\", function(){\n\n$('#mydiv1').removeClass();\n\n});<\/pre>\n<h3>Example #4 &#8211; Add a single class to a div\u00a0using the jQuery .css() method<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_add_red_class').on(\"click\", function(){\n\n$('#mydiv1').attr('class', 'red');\n\n});<\/pre>\n<h3>Example #5 &#8211; Append a single new class to an existing class of a div using css() method<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_add_green_class').on(\"click\", function(){\n\n$('#mydiv1').addClass('green');\n\n});<\/pre>\n<h3>Example #6 &#8211; Remove a specific single class from a list of all applied classes using .css() method in jQuery<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_remove_red_class').on(\"click\", function(){\n\n$('#mydiv1').removeClass('red');\n\n});<\/pre>\n<h3>Example #7 &#8211; Add Class by specifying CSS style directly\u00a0using jQuery CSS<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_add_purple_bg').on(\"click\", function(){\n\n$('#mydiv1').css(\"background-color\",\"purple\");\n\n});<\/pre>\n<h3>Example #8 &#8211; Add new css styles\u00a0using the .css() method in jQuery (If any of the style is already present on the target div, it will be overwritten with the new style).<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_add_multiple_css').on(\"click\", function(){\n\n$('#mydiv1').css({\"background-color\":\"#CEFFCE\", \"font-size\":\"20px\", \"font-color\":\"#000\", \"font-weight\":\"bold\"});\n\n});<\/pre>\n<h3>Example #9 &#8211; Add CSS styles via &#8220;chaining&#8221;\u00a0using .css() method of jQuery<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_chain_css_styles').on(\"click\", function(){\n\n$('#mydiv1').css(\"background-color\", \"#0099FF\")\n.css(\"font-size\", \"40px\")\n.css(\"font-color\", \"#FFF\")\n.css(\"font-weight\", \"normal\")\n.css(\"border\", \"10px solid #06C\");\n\n});<\/pre>\n<h3>Example #10 &#8211; Reset the divs back to their original state\u00a0using the .css() method<\/h3>\n<pre class=\"lang:js decode:true\">$('#sbt_reset').on(\"click\", function(){\n\n$(\".divs_container\").html(divs_container_html);\n\n});<\/pre>\n<p>Easy so far? You can build up on the other CSS properties using the methodology as described above.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1477\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>That&#8217;s it for this article!<\/h5>\n<p>Do you know of any other ways to use the <em><strong>jQuery\u00a0css method<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery CSS is an easy to use method available in jQuery for accessing\u00a0the style property from the first matched element, in the set of matched elements. Simply put, if you need to assign a new value via CSS, modify an existing CSS value or need to remove the existing CSS values using jQuery, then jQuery [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[40,42,41],"class_list":["post-1477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-nP","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1477"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1477\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}