Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Thursday, January 8, 2015

Remove CSS Class using Jquery

We can remove css class in jquery like this-

Suppose we a “div” control like this :

<div id="divGrid" class="gridtable">
This is Test      
</div>

Here how we remove class from div-

$("#divGrid").removeClass("gridtable");

How to remove style using Jquery

We can remove style of an element in Jquery in the following ways-

Suppose we have a “div” control like this :

<div id="divGrid"style="max-height: 400px; overflow: auto; width: 100%;">
This is Test
</div>

      1.       Remove style attribute of the “div”

$("#divGrid").attr("style", "");//for remove style of div

    2.       Change width of the “div”

$("#divGrid").css("width", "1200px");// width of the div will be changed to 1200px

Saturday, January 3, 2015

getting css property value in jquery and applying css to an element in jquery

In jquery we can get the css value in following ways:

“.css” function is used to get css property of any element in jquery.

Example :

    <p style="font-size:20px" id="para1">
        Put content here.
    </p>

    <input type="submit" name="btnSubmit" value="Submit" onclick="return getBackColor();"        id="btnSubmit" />

function getBackColor() {
var color=$("p").css("font-size");
       alert(color);      
}  

We can set css to an element as following:

1.       Applying Single CSS

     $("p").css("font-size","30px");

2.       Applying Multiple CSS

     $("p").css({ "font-size": "30px", "color": "red" });



Note: We can use ID of the element also for applying css or getting value of css like $("#para1").css