<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>styles Archives - scmGalaxy</title>
	<atom:link href="https://www.scmgalaxy.com/tutorials/tag/styles/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.scmgalaxy.com/tutorials/tag/styles/</link>
	<description>A Platform for Software Engineers</description>
	<lastBuildDate>Wed, 13 Apr 2022 16:34:26 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>How to Use change CSS styles in jQuery?</title>
		<link>https://www.scmgalaxy.com/tutorials/how-to-use-change-css-styles-in-jquery/</link>
					<comments>https://www.scmgalaxy.com/tutorials/how-to-use-change-css-styles-in-jquery/#respond</comments>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Fri, 01 Oct 2021 12:52:42 +0000</pubDate>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[index.html]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[main.js]]></category>
		<category><![CDATA[style.css]]></category>
		<category><![CDATA[styles]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=9352</guid>

					<description><![CDATA[<p>So in this blog, we’re going to learn that How to Use change CSS styles in jQuery? So let’s go ahead and [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-use-change-css-styles-in-jquery/">How to Use change CSS styles in jQuery?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">So in this blog, we’re going to learn that How to Use change <strong>CSS</strong> styles in <strong>jQuery</strong>?</p>



<p class="wp-block-paragraph">So let’s go ahead and do that for first in <strong>index.html</strong>, with help of <strong>style.css</strong> &amp; <strong>main.js</strong> and define-</p>



<script src="https://gist.github.com/ajcotocus/1f9b227642f84b857a5247ababed5ea7.js"></script>



<script src="https://gist.github.com/ajcotocus/72f8fa315a93019d107fc1f17c347839.js"></script>



<p class="wp-block-paragraph">To retrieve or set the value of a CSS property, you can use css(). This works similar to attr() and prop(): pass one argument to read or two arguments to set a new value. For instance, you can achieve the same as with hide() like this:</p>



<p class="wp-block-paragraph"><strong> $(&#8220;p:first&#8221;).css(&#8220;display&#8221;, &#8220;none&#8221;);</strong></p>



<p class="wp-block-paragraph">You can change any CSS property in this simple way.</p>



<p class="wp-block-paragraph"><strong>  redBox.css(&#8220;background-color&#8221;, &#8220;#AA5500&#8221;);</strong></p>



<p class="wp-block-paragraph"><strong>  $(&#8220;p&#8221;).css(&#8220;font-size&#8221;, &#8220;20px&#8221;);</strong></p>



<p class="wp-block-paragraph">You can even change the value of a property relative to its previous value</p>



<p class="wp-block-paragraph">re<strong>dBox.css(&#8220;width&#8221;, &#8220;+=20px&#8221;);<br>redBox.css(&#8220;height&#8221;, &#8220;-=20px&#8221;);</strong></p>



<p class="wp-block-paragraph">Also, you can retrieve multiple values by passing an array as the argument</p>



<p class="wp-block-paragraph"> v<strong>ar properties = $(&#8220;p&#8221;).css([&#8220;font-size&#8221;, &#8220;line-height&#8221;, &#8220;color&#8221;]);</strong></p>



<p class="wp-block-paragraph">You can see that in the Developer Tools (F12 in browser) in the Inspector tab.</p>



<p class="wp-block-paragraph"><strong>redBox.css(&#8220;user-select&#8221;, function() {</strong><br><strong>// [some logic here…]</strong><br>r<strong>eturn &#8220;none&#8221;;<br>});</strong></p>



<script src="https://gist.github.com/ajcotocus/c3a31860f06a022ce5d79e37c001ea15.js"></script>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="592" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-1-1024x592.png" alt="" class="wp-image-9354" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-1-1024x592.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-1-300x173.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-1-768x444.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-1-1536x888.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/10/image-1.png 1616w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Use change CSS styles in jQuery</figcaption></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-use-change-css-styles-in-jquery/">How to Use change CSS styles in jQuery?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/how-to-use-change-css-styles-in-jquery/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
