Ir para conteúdo

POWERED BY:

Arquivado

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

rcvanni

Alterar atributo css via javascript

Por , em Desenvolvimento frontend

Recommended Posts

rcvanni    0

rcvanni
Postado

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

Guilherme Rambo    4

Guilherme Rambo
Postado 
<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

Daniel_MV    0

Daniel_MV
Postado

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

Nícolas    4

Nícolas
Postado

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

programador php    0

programador php
Postado

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

aletres    0

aletres
Postado

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

daniel.uramg    0

daniel.uramg
Postado

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

William Bruno    1501

William Bruno
Postado

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
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito