Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Changing CSS Properties of HTML element using JQuery
Posted By Sarin on Feb 18, 2013     RSS Feeds     Latest Hinduism news
4332 Views

Changing CSS properties at runtime or at some event is the most common need of any website/application. JQuery offer us a list of functions that practically allows us to set any CSS property of any HTML element. Using JQuery, We can modify a document appearance very easily by changing the CSS properties of any HTML element in your page.

Change CSS properties using JQuery
With JQuery, CSS properties are changed using .CSS method. This method takes two inputs: CSS Property name followed by the value. Value can be a number, string or a function. If a function is passed as this parameter, it will be called for each element of the wrapped set where the return value will be the value of the CSS property. Below is the notation
.css('property','value')
  
JQuery also have the notation to change multiple CSS properties in one method declaration. Multiple CSS properties are set using comma separated delimiters wherein each property name is followed by the property value separated by colon. Below is the exact notation
.css({property1: 'value1', 'property-2': 'value2'})
Demo:
For this demo, I have three div elements, few paragraph elements, few hyperlinks and few buttons on click of which we would change CSS properties of our HTML elements.
HTML
<h3>Demo: Css Element</h3>
    <div id="switcher">
        <div class="HW">
            Change Height & Width</div>
        <div id="increase">
            Increase Size</div>
        <div id="decrease">
            Decrease size</div>
    </div>
<p class="P1">This is Paragraph 1.</p>
<p>This is Paragraph 2.</p>
<p id="P3">This is Paragraph 3.</p>
<a id="link" href='https://www.google.com'>Google.com</a><br /><br />
<input type="button" value="Change Font Size" onclick='ChangeFontSize();'/>
<input type="button" value="Change Height Width" onclick='ChangeHeightWidth();' />
<input type="button" value="Change Border Padding" onclick='BorderPadding();' />
<input type="button" value="Set Background" onclick='SetBG();' />
Script:
Below is the associated JQuery code. On click of first button, we change the font size of div elements using the below JQuery code.  

        function ChangeFontSize()  {
//            $("[id$=increase]").css("font-size", "xx-large");
            $("#increase").css("font-size", "xx-large");
            $("#decrease").css("font-size", "xx-small");
            $("#link").css("cursor", "pointer");
        }
  
On click of second button, we change the width and height of div and paragraph element using the below code. Please note the third paragraph is changed using the return value of a function.
        function ChangeHeightWidth()  {
            $(".HW").css( 'width': '120px', 'height': '80px' );
            $(".P1").width(100);
            $("#P3").css("height", function ()  {
                return $(".HW").height() + 50 + "px";
            });
        }
  
On click of third button, we change the border style, padding and margin of paragraph and div element using below JQuery code. Please note I have used both methods of changing multiple CSS properties in a single statement.
  
function BorderPadding()  {
$('p:even').css( 'padding': '30px', 'border': '3px', 'border-style': 'dashed' );
$('#increase').css("margin", "30px").css("border", "5px").css("border-style", "dotted");
  }
  
On click of fourth button, we change the background image of a div element using below JQuery code
  
  function SetBG()  {
        $('#switcher').css("background-image", "url('sunset.jpg')");
        }

Output:
Below are the outputs on clicking the third and fourth button. Please download attached file for source code.
On clicking third button

On clicking fourth button

Conclusion
In this article, we saw how to change appearance of a document using JQuery. JQuery provides us very easy to use methods to change the CSS properties of a HTML element dynamically.
  
Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Related Articles
Displaying Image in silverlight Datagrid
The breakpoint will not currently be hit. No symbols have been loaded for this document
Call JavaScript functions from silverlight
Commonly used string Functions
Changing CSS Properties of HTML element using JQuery
Science in Hinduism-Gravitational force and repulsive force
Get set field, Properties,events or method using reflection
Add, remove or toggle class of HTML control using jquery.
Working with AJAX ColorPickerExtender control
Playing with HTML using Jquery

Post Comment