Elements css() - KirkGarcia182/domExtend GitHub Wiki

css()

Description

Sets a single or multiple styles to an element

Syntax

// set a single style to an element
element.css(styleName, styleValue);

// set multiple styles to an element
element.css({
   styleName1: styleValue1,
   styleName2: styleValue2,
   styleName3: styleValue3
});

Return Value

The element you just manipulated so you can chain these methods.

Example

<!DOCTYPE html>
<html>
<head>
	<title>domExt Examples</title>
</head>
<body>
	<div id="app">
		<div class="menus">
			<ul id='menuList'>
				<li><a class='menuLink'>Menu 1</a></li>
				<li><a class='menuLink'>Menu 2</a></li>
				<li><a class='menuLink'>Menu 3</a></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="domExt.js"></script>
	<script type="text/javascript">
		window.$ = document;

		let app = $.byId('app');
		// set a single style to an element
		app.css('color','lime');
		console.log(app);
		/* Result
			<div id="app" style='color: lime'>
		*/

		// set multiple styles to an element
		app.css({
			backgroundColor: 'pink',
			fontSize: '21px',
			fontWeight: 'bold',
			width: '100px',
			height: '150px'
		});
		console.log(app);
		/* Result
			<div id="app" style='color: lime; background-color: pink, font-size: 21px, font-weight: bold, width: 100px, height: 150px'>
		*/
	</script>
</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️