CSS Manipulation using jQuery in Tamil

The css() function in jQuery is used to get or set CSS properties for selected elements. It provides a convenient way to dynamically manipulate the style of HTML elements on a web page.

Syntax

Get CSS Property Value:

$(selector).css(propertyName)

selector : A string containing a selector expression to match the elements against.
propertyName : A string representing the name of the CSS property whose value you want to retrieve.

Set CSS Property Value:

$(selector).css(propertyName, value)

selector : A string containing a selector expression to match the elements against.
propertyName : A string representing the name of the CSS property to set.
value: A string or number representing the value to set for the CSS property.

Set Multiple CSS Properties:

$(selector).css({propertyName1: value1, propertyName2: value2, ...})

selector : A string containing a selector expression to match the elements against.
{propertyName1 : value1, propertyName2: value2, ...} : An object where keys are CSS property names and values are the corresponding values to set.

When setting CSS properties, you can provide a single property-value pair or an object containing multiple properties and values.
The css() function can be used to both get and set CSS properties.
If multiple elements match the selector, the css() function will apply the operation to all matched elements.

Source Code

$("h1").css('font-size','30px'); : This line sets the font size of the <h1> element to 30 pixels.
$("h1").css({ 'color':'white', 'background':'orange', 'padding':'10px' }); : This line sets multiple CSS properties for the <h1> element. It changes the text color to white, the background color to orange, and adds padding of 10 pixels.
When the page is loaded, the jQuery code modifies the styling of the <h1> element. The heading text will have a font size of 30 pixels, white text color, an orange background, and 10 pixels of padding. The changes are applied dynamically using jQuery's css() method, demonstrating how you can use jQuery to manipulate the style of HTML elements on the fly.

<html>
	<head>
		<title>Applying Css Properties</title>
	</head>
	<body>
	<h1>Tutor Joes Computer Education</h1>
	<script>
		$("document").ready(function(){
			//Single
			$("h1").css('font-size','30px');
			//Mulitiple
			$("h1").css({
				'color':'white',
				'background':'orange',
				'padding':'10px'
			});
		});
	</script>
	</body>
</html>

The css() function is a powerful tool for dynamically modifying the appearance of elements on a webpage and is commonly used in conjunction with other jQuery methods to create interactive and visually appealing user interfaces.

CSS Manipulation using jQuery in Tamil

Source Code

List of Programs

jQuery Selectors

jQuery HTML

jQuery Traversing