#29 gradient change

gradient-move.js

//Nosso clássico callback

window.onload = function () {

	//A div 'wrapper'

	var div = document.getElementById('wrapper');

	//o 'onclick' recebe um callback

	div.onclick = function (event) {
		//eis um aspecto interessante de Javascript
		//this, aqui, refere-se à própria div, visto que estamos dentro do callback
		//que estamos passando para 'onclick'. Nenhuma div tem a propriedade 'MINHAPROPRIEDADE'
		//fiz questão de usar todas os caracteres maiúsculos para dar destaque:

		//estamos checando se a div tem esta propriedade...
		//se ela não tem, vamos atribuí-la com o valor false
		//se tem, 'MINHAPROPRIEDADE' recebe o valor true
		//ou seja, criamos um 'liga e desliga' para esta div
		
		//toda vez que eu clico no elemento, o valor contrário é atribuído,
		//logo, cai no 'if' e no 'else' intermitentemente



		if (this.MINHAPROPRIEDADE) {
			this.MINHAPROPRIEDADE = false;

			//aqui dizemos que o background do elemento é uma string vazia...
			this.style.background = '';

		} else {
			this.MINHAPROPRIEDADE = true;

			//aqui atribuímos valores diferentes para o background em cada uma dessas linhas
			//é um jeito muito primitivo, mas funciona, pois os browsers ignoram estilos que não fazem sentido
			//para eles. Por exemplo, o Firefox ignora o estilo atribuído para ser aplicado ao Chrome.

			this.style.background = '-moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%)';
			this.style.background = '-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)))';
			this.style.background = '-webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)';
			this.style.background = '-o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)';
			this.style.background = '-ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)';
			this.style.background = 'linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)';
			
		}
		console.log(this.MINHAPROPRIEDADE)
	}

}