.css() jQuery method

EasyProgramming.net tutorial

by Nazmus Nasir

HTML

<!-- Easy jQuery - working with .css() - #9 -->
<p>
Welcome to the 9th Easy jQuery Tutorial, part of <a href="https://www.easyprogramming.net">EasyProgramming.net</a>. In this tutorial, let's learn about working with the .css() jQuery method.
</p>
<p>
We've used this in the first tutorial when we were demoing the syntax of jQuery. Let's build on that and get a little more complicated! 
</p>

<h2>
Let's practice: 
</h2>

<p>
This text is in a <code>p</code> tag. Let's change the color of all text in p tags!
</p>

<div id="box">I'm a box</div>
<br />
<button id="random">
Randomize Me
</button>

JavaScript

$('p').css('color', 'blue');

$('#box').css({
	'color' : 'darkblue',
	'background-color': 'pink',
	'width': '100px',
	'height': '100px',
	'text-align': 'center'
});

$('#box').on('click', function(){
	console.log($(this).css('background-color'));
});

function rand(){
	return Math.floor(Math.random() * 255);
}

$('#random').on('click', function(){
	$('#box').css({
		'background-color': 'rgb(' + rand() + ',' + rand() + ',' + rand() + ')'
	});
});