YogeshChauhan.com
How to change CSS with jQuery?
August 23, 2020

We can add, remove or change CSS property values with jQuery just like we can with JavaScript.

Just change it directly.

Easier to target the element than JavaScript.


$('#ID_name').css('padding', '2%');

Change more than one properties


$('#ID_name').css({
 margin: "2%",
 padding: "10px",
 color: "green"
});

Properties with quotes

We can use CSS rules that have hyphens in them (i.e. font-size) OR we can put them in quotes or camel-case the style rule name.


$('.class_name').css({
 "background-color": "blue",
});
dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS Mar 2 WordPress: How to access first and random row values from a repeater field in ACF? Mar 1 The basics of CSS Box model Feb 27 WordPress: How to display slider repeater fields in ACF? Feb 26 Simple Page Hit Counter in PHP

You might also like these

Accessing and Setting features of JavaScript ObjectsJavaScriptKanban vs Scrum: The two frameworks of agile principlesMiscHow to add CurrencyPipe in TypeScript file in Angular 9 Project?AngularHow to make a UILabel clickable in Swift 5?SwiftThe 7 Security Objectives of Any Organization for IT and Network SecurityMiscSQL ALL OperatorSQL/MySQLUnderstanding the confusing and handy “This” keyword in JavaScriptJavaScriptQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptSolution to Could not cast value of type ‘NSTaggedPointerString’ to ‘NSNumber’SwiftSocial Media Colors: Sass VariablesMiscHow to check if checkbox is checked or not using JavaScript?JavaScriptIntroduction to components and templates Part 1: Component MetadataAngular