HTMLCollection and Nodelist css() - KirkGarcia182/domExtend GitHub Wiki

css()

Description

Sets a single or multiple style attributes of the elements within the collection.

Syntax

// sets a single style
collection.css(styleName, styleValue);

// sets multiple styles
collection.css({
   styleName1: styleValue1,
   styleName2: styleValue2,
   styleName3: styleValue3
});

Parameters

styleName - A String referring to a valid style name.

styleValue - A String referring to a valid style value to the style name

Return Value

The collection 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='menuList1'>
				<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>
			<ul id="menuList2"></ul>
			<ul id="menuList3"></ul>
		</div>
	</div>
	<script type="text/javascript" src="domExt.js"></script>
	<script type="text/javascript">
		window.$ = document;

		let collection = $.qsa('.menuLink');
		// set a single style
		collection.css('color', 'skyblue');
		console.log(collection);
		/* Result
			<li><a class='menuLink' style='color: lime'>Menu 1</a></li>
			<li><a class='menuLink' style='color: lime'>Menu 2</a></li>
			<li><a class='menuLink' style='color: lime'>Menu 3</a></li>
		*/

		// set multiple styles
		collection.css({
			fontSize: '14px',
			fontWeight: 'bold',
			fontFamily: 'Verdana'
		});

		console.log(collection);
		/* Result
			<li><a class='menuLink' style='color: lime; font-size: 14px; font-weight: bold; font-family: Verdana'>Menu 1</a></li>
			<li><a class='menuLink' style='color: lime; font-size: 14px; font-weight: bold; font-family: Verdana'>Menu 2</a></li>
			<li><a class='menuLink' style='color: lime; font-size: 14px; font-weight: bold; font-family: Verdana'>Menu 3</a></li>
		*/
	</script>
</body>
</html>