Javascript >> Css e Javascript

Com o javascript podemos alterar a classe css de qualquer elemento html, para tal utilizamos a propriedade javascript de elementos html com o nome de "className". Veja o Exemplo:

<script> document.getElementById("MinhaDiv").className = “UmaClasseCss”; </script>

No exemplo acima, alteramos a classe CSS do elemento HTML cujo id é “MinhaDiv” para a classe CSS de nome “UmaClasseCss”.

Também podemos alterar propriedades específicas do CSS de um elemento HTML da página, basta alterar a respectiva propriedade no “style” do elemento. Veja a tabela abaixo para saber como alterar cada uma das propriedades css de um elemento. Obs: Suponha que você tem uma página HTML com o seguinte elemento em seu código:

<div id=’MinhaDiv’>&nbsp;</div>

Lista contendo atributos css, o nome da respectiva propriedade dentro do style em javascript, a descrição do que faz o atributo css e um exemplo de como acessa-lo e altera-lo via javascript:

CSS	JavaScript	Descrição	Uso (Javascript)
background-attachment	backgroundAttachment	Define se a imagem de fundo de um elemento ficará fixa ("fixed") ou se irá rolar junto com o conteúdo("scroll").	document.getElementById("MinhaDiv").style.backgroundAttachment = "fixed";
background-color	backgroundColor	Define a cor de fundo de um elemento.	document.getElementById(“MinhaDiv”).style.backgroundColor = “#000000”;
background-image	backgroundImage	Define uma imagem como fundo de um elemento.	document.getElementById("MinhaDiv").style.backgroundImage = "url(http://www.vabolt.com/design/16x16ico.png)";
background-position	backgroundPosition	Define o alinhamento da imagem de fundo de um elemento.	document.getElementById("MinhaDiv").style.backgroundPosition = "right";
background-repeat	backgroundRepeat	Define se a imagem vai repetir ou não e a direção da repetição.	document.getElementById("MinhaDiv").style.backgroundRepeat = "no-repeat";
border	border	Define o formato da borda de um elemento.	document.getElementById("MinhaDiv").style.border = "2px solid black";
border-bottom	borderBottom	Define o formato da borda inferior de um elemento.	document.getElementById("MinhaDiv").style.borderBottom = "2px solid black";
border-left	borderLeft	Define o formato da borda esquerda de um elemento.	document.getElementById("MinhaDiv").style.borderLeft = "2px solid black";
border-right	borderRight	Define o formato da borda direita de um elemento.	document.getElementById("MinhaDiv").style.borderRight = "2px solid black";
border-top	borderTop	Define o formato da borda acima de um elemento.	document.getElementById("MinhaDiv").style.borderTop = "2px solid black";
bottom	bottom	Define a distância à baixo do elemento em relação ao elemento que o contém.	document.getElementById("MinhaDiv").style.bottom = "20px";
color	color	Define a cor do texto.	document.getElementById("MinhaDiv").style.color = "#FFFFFF";
cursor	cursor	Define o ícone do cursor do mouse quando o mesmo passar sobre o elemento	document.getElementById("MinhaDiv").style.cursor = "pointer";
display	display	Define se um elemento deve ser apresentado e a forma de sua apresentação.	document.getElementById("MinhaDiv").style.display = "none";
font-family	fontFamily	Define o tipo de fonte.	document.getElementById("MinhaDiv").style.fontFamily = "Arial";
font-size	fontSize	Define o tamanho da fonte.	document.getElementById("MinhaDiv").style.fontSize = "20px";
font-weight	fontWeight	Define a espessura do traço da fonte.	document.getElementById("MinhaDiv").style.weight = "bold";
height	height	Definem a altura de um elemento.	document.getElementById("MinhaDiv").style.height = "100px";
left	left	Define a distância à esquerda do elemento em relação ao elemento que o contém.	document.getElementById("MinhaDiv").style.left = "20px";
margin	margin	Define o espaçamento entre o elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.margin = "50px";
margin-bottom	marginBottom	Define o espaçamento entre a região abaixo de um elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.marginBottom = "20px";
margin-left	marginLeft	Define o espaçamento entre a região a esquerda de um elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.marginLeft = "20px";
margin-right	marginRight	Define o espaçamento entre a região a direita de um elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.marginRight = "20px";
margin-top	marginTop	Define o espaçamento entre a região superior de um elemento e os demais conteúdos da página.	document.getElementById("MinhaDiv").style.marginTop = "20px";
overflow	overflow	Define o que deve ocorrer quando o conteúdo de um elemento excede sua área.	document.getElementById("MinhaDiv").style.overflow = "auto";
padding	padding	Define o espaçamento entre o conteúdo de um elemento e sua borda.	document.getElementById("MinhaDiv").style.padding = "15px";
padding-bottom	paddingBottom	Define o espaçamento entre o conteúdo de um elemento e sua borda abaixo.	document.getElementById("MinhaDiv").style.paddingBottom = "20px";
padding-left	paddingLeft	Define o espaçamento entre o conteúdo de um elemento e sua borda a esquerda.	document.getElementById("MinhaDiv").style.paddingLeft = "20px";
padding-right	paddingRight	Define o espaçamento entre o conteúdo de um elemento e sua borda a direita.	document.getElementById("MinhaDiv").style.paddingRight = "20px";
padding-top	paddingTop	Define o espaçamento entre o conteúdo de um elemento e sua borda superior.	document.getElementById("MinhaDiv").style.paddingTop = "20px";
position	position	Define a posição de um elemento como estática, relativa, absoluta ou fixa.	document.getElementById("MinhaDiv").style.position = "absolute";
right	right	Define a distância à direita do elemento em relação ao elemento que o contém.	document.getElementById("MinhaDiv").style.right = "20px";
text-align	textAlign	Define o alinhamento do texto.	document.getElementById("MinhaDiv").style.textAlign = "right";
text-decoration	textDecoration	Define um efeito decorativo para o texto.	document.getElementById("MinhaDiv").style.textDecoration = "underline";
top	top	Define a distância ao topo do elemento em relação ao elemento que o contém.	document.getElementById("MinhaDiv").style.top = "20px";
width	width	Definem a largura de um elemento.	document.getElementById("MinhaDiv").style.width = "100px";
z-index	zIndex	Define a ordem de apresentação (quem ficará na frente e quem ficará atrás) de um elemento quando há sobreposição de elementos.	document.getElementById("MinhaDiv").style.zIndex = "100";