Thursday, March 28
Shadow

Jquery

Change css property with jquery

jQuery is an open-sourced JavaScript library that simplifies creation and navigation of web applications. Specifically, jQuery simplifies HTML Document Object Model (DOM) manipulation, Asynchronous JavaScript and XML (Ajax) and event handling.

jQuery is a lightweight, “write less, do more”, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

It is a compact, swift and feature rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that runs across large number of browsers.

Now we need to understand that how to use combination of css and jquery together to solve our purpose. There are multiple use of jquery with css. Lets understand widely use jquery script for css.

jquery add css class:

$("button").click(function(){
  $("p:first").addClass("intro");
});

The addClass() method adds one or more class names to the selected elements.

This method does not remove existing class attributes, it only adds one or more class names to the class attribute.

Change Specific CSS Element using jquery:

Syntax is

$('jQuery selector').css({"css property name":"css property value"});

Real Example

$('p').css({"color":"green"});

Remove CSS Styles using jquery:

$('#mydiv').removeClass('colors');
$('#div').removeClass('red').addClass('green');

Apply !important using .css()

const $elem = $("#elem");
$elem[0].style.setProperty('width', '100px', 'important');

jquery css width

If you want to change or set any css width, then you can do it using jquery as under.

$('div#somediv').width('70%');
$('div#somediv').css({'width': '70%'});