{"id":3959,"date":"2013-09-25T19:05:20","date_gmt":"2013-09-25T19:05:20","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3959"},"modified":"2013-09-25T19:05:20","modified_gmt":"2013-09-25T19:05:20","slug":"removing-single-inline-style-property-using-jquery","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/removing-single-inline-style-property-using-jquery\/","title":{"rendered":"Remove Only One Inline Style Property With jQuery Examples"},"content":{"rendered":"<p>At some point of time or the other, you may have come across an element that has inline styles applied to it with multiple properties and their respective values. So do you know of a way to <strong>remove a specific property<\/strong> and retain the rest? If not, this article is for you. In this article, I am going to share share a very easy way to do so. Follow along for more info.<\/p>\n<p><!--more--><\/p>\n<h2>How to remove a specifc inline property using jQuery<\/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=3959\" 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>Let&#8217;s look at how to do this by means of an example. Assume that you have a div with ID &#8220;<strong>my_div<\/strong>&#8220;. This div has four properties such as width, height and background color and color applied inline to it. So it would look something like this:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div id=\"my_div\" style=\"width: 50%; height: 50%; background-color:red; color:green;\"&gt;\nThis is my div with a background\n&lt;\/div&gt;<\/pre>\n<p>Now you would like to remove the background-color property alone and leave the other properties with their respective values as it is. In order to so, here&#8217;s what you would need to do:<\/p>\n<pre class=\"lang:xhtml decode:true\">$('#my_div').css(\"background-color\", \"\");<\/pre>\n<p>Considering the above example, if you just wanted to remove the height property of the div and retain the others as they are, here&#8217;s what needs to be done:<\/p>\n<pre class=\"lang:xhtml decode:true\">$('#my_div').css(\"height\", \"\");<\/pre>\n<p>So you see, it&#8217;s very easy to remove any specific property along with its value applied to any element when inline styles are applied to the element.<\/p>\n<p><strong>NOTE:<\/strong><\/p>\n<p>One thing to remember is that removing any property in the way indicated above, will not overwrite the stylesheet itself. That means, your styles will be intact in the stylesheet. The targeted inline property will be just removed from the element in the DOM.<\/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=3959\" 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!<\/h5>\n<p>Has this post helped you? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At some point of time or the other, you may have come across an element that has inline styles applied to it with multiple properties and their respective values. So do you know of a way to remove a specific property and retain the rest? If not, this article is for you. In this article, [&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":[42,43,41],"class_list":["post-3959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-11R","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3959","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=3959"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3959\/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=3959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}