Jump to content

Archived

This topic is now archived and is closed to further replies.

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

Share this post


Link to post
Share on other sites
<script type="text/javascript">document.getElementById("id_do_campo").style.border="solid 0px #936";</script>

eh isso []'s

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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>

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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')"

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.