Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rcvanni

Alterar atributo css via javascript

Recommended Posts

Pessoal,

 

Alguém saberia se tem como atualizar dinamicamente ( talvez via javascript ... ) um atributo css ?

 

Ex.: no código abaixo, seria possível utilizar o evento onclick() no js para alterar dinamicamente o 'border: solid 2px #936' para 'border: solid 0px #936' de determinado elemento do form ?

 

<style type="text/css">#mapa {background-image: url(<?php echo $filet;?>);height: 85px; width: 580px;position: absolute; top: 0px;}#mapa a {border: solid 2px #936;}#map a:hover {border: solid 2px #936;}#mapa a i { visibility:hidden; }a#i18 { height: 3; width:4; top:0px; left: 0px }a#i18 { border: solid 0px #936;  }a#i17 { height: 20; width: 35; top: 0px; left: 0px }a#i16 { border: solid 0px #936;  }</style></head><body><form action="edit.php" method="post" name="editform"><table border=0 ><tr><td align="center" border=0 id="mapa"><a href="" id="i18" onclick="mostra(18)"><i>i18</i></a><a href="" id="i17" onclick="mostra(17)"><i>i17</i></a>...

 

[]s

Compartilhar este post


Link para o post
Compartilhar em outros sites
<script type="text/javascript">document.getElementById("id_do_campo").style.border="solid 0px #936";</script>

eh isso []'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

E como eu faço para alterar a classe css de um elemento via javascript, por exemplo:

<tr>
		<td width="84" class="aba_ativa">PASSO 1</td>
		<td width="84" class="aba_desativa">PASSO 2</td>
		<td width="84" class="aba_desativa">PASSO 3</td>
		<td width="84" class="aba_desativa">PASSO 4</td>
		<td width="84" class="aba_desativa">PASSO 5</td>
		<td width="84" class="aba_desativa">PASSO 6</td>
		<td width="84" class="aba_desativa">PASSO 7</td>
		<td width="84" class="aba_desativa">PASSO 8</td>	
		<td width="84" class="aba_desativa">PASSO 9</td>
</tr>

Isso são abas de uma ficha cadastral, no caso teria pagina 1, pagina 2, pagina 3, etc....

 

Eu gostaria de ao carregar a página 2 mudar a classe css de 'aba_desativa' para 'aba_ativa'.

 

Se alguém souber como faz via postback tmb serve pois estou usando aspnet e c#, mas o ideal era fazer isso via javascript.

 

obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Apesar deu ser contra o uso de tabelas ^^

Faz assim =)

 

Javascript

function abas (id){

	for (i = 1; i < 10; i++){
		 document.getElementById('passo'+i).className = "aba_desativa";
	}
				
	document.getElementById(id).className = "aba_ativa";	

}

 

 

Javascript

<table>
<tr>
		<td width="84" id="passo1" onclick="abas('passo1')" class="aba_ativa">PASSO 1</td>
		<td width="84" id="passo2" onclick="abas('passo2')" class="aba_desativa">PASSO 2</td>
		<td width="84" id="passo3" onclick="abas('passo3')" class="aba_desativa">PASSO 3</td>
		<td width="84" id="passo4" onclick="abas('passo4')" class="aba_desativa">PASSO 4</td>
		<td width="84" id="passo5" onclick="abas('passo5')" class="aba_desativa">PASSO 5</td>
		<td width="84" id="passo6" onclick="abas('passo6')" class="aba_desativa">PASSO 6</td>
		<td width="84" id="passo7" onclick="abas('passo7')" class="aba_desativa">PASSO 7</td>
		<td width="84" id="passo8" onclick="abas('passo8')" class="aba_desativa">PASSO 8</td>  
		<td width="84" id="passo9" onclick="abas('passo9')" class="aba_desativa">PASSO 9</td>

</tr>
</table>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

isso aí tá com cara de java, eu estou programando em .net

 

mas vai ter que ser via javascript, não tem jeito.

 

obrigado

Jquery é um framework javascript!!!

 

num tem nada de JAVA nisso

 

 

mas que bomq ue resolveu o seu problema!!

 

abraço

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dá uma olhada nesse código, ele troca a classe de todos os elementos dela:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TESTES</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function AlteraClasse(){
	alert("Vai alterar...");
   	$(".formato").css("color", "#0000FF");
   	alert("Alterou.");
}
//-->
</script>

<style type="text/css">
  .formato {color:#00FF00 }
</style>

</head>

<body>

<table width="200" border="1">
  <tr id="menu1" onClick="AlteraClasse()" class="formato">
    <td><b>Color1</b></td>
  </tr>
</table>

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá pessoal,

 

resolvi desenterrar o tópico pra não criar outro com o mesmo assunto

 

eu tenho uma págna com vários links e gostaria de alterar o estilo do link no clique, mas todos os links não tem ID e tem a mesma CLASS, então se eu usar uma função que altera com base no ID ou classe vai alterar de todos de uma vez, eu precisava de uma função que alterasse somente do próprio atributo.

 

Seria +- isso, mas esta função altera o estilo de todos os atributos ao invés de alterar so o dele mesmo:


<head>
<meta http-equiv="Content-Language" content="pt-br">
</head>

<script type="text/javascript">
function setAttributeOfElement(attributeName,attributeValue,ElementXpath)
{
    var alltags = document.evaluate(ElementXpath,document,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);
    for (i=0; i<alltags.snapshotLength; i++)
        alltags.snapshotItem(i).setAttribute(attributeName, attributeValue)
        } 
        </script>

<p class="video cboxElement" onclick="javascript: setAttributeOfElement('style','text-decoration: line-through; font-weight: bold',"//p[@class='video cboxElement']")">video1</p>
<p class="video cboxElement" onclick="javascript: setAttributeOfElement('style','text-decoration: line-through; font-weight: bold',"//p[@class='video cboxElement']")">video2</p>
<p class="video cboxElement" onclick="javascript: setAttributeOfElement('style','text-decoration: line-through; font-weight: bold',"//p[@class='video cboxElement']")">video3</p>

Grato

Compartilhar este post


Link para o post
Compartilhar em outros sites

this

 

 

<head>
<meta http-equiv="Content-Language" content="pt-br">
</head>

<script type="text/javascript">
function set($element, k, v) {
    $element.style[k] = v;
}
</script>

<p class="video cboxElement" onclick="set(this, 'fontWeight', 'bold')">video1</p>
<p class="video cboxElement" onclick="set(this, 'fontWeight', 'bold')">video2</p>
<p class="video cboxElement" onclick="set(this, 'fontWeight', 'bold')">video3</p>
Mas, o mais recomendado é vc não alterar propriedades diretamente, mas sim classes.

<script type="text/javascript">
function set($element, cn) {
    $element.classList.add = cn;
}
</script>
e ai:

onclick="set(this, 'is-active')"

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.