Ir para conteúdo

POWERED BY:

Arquivado

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

leanhils

Mudar a cor de fundo com javascript

Por , em Javascript

Recommended Posts

leanhils    0

leanhils
Postado

O script para alterar a cor da letra e fundo na página funciona perfeitamente porem ao definir uma cor de fundo no texto usando o TimyMCE o recurso em javascript não consegue alterar a cor da letra nem do fundo

 

Codigo gerado TimyMCE

table style="height: 21px;" width="414">
<tbody>
<tr>
<td><span class="texto" style="background-color: #0000ff;">BBBBBBBBB</span></td>
<td><span class="texto" style="background-color: #808000;">CCCCCCC</span></td>
<td><span class="texto" style="background-color: #333300;">EEEEEEEEEEE</span></td>
</tr>
</tbody>
</table>

Fomulario mudar a cor via javascript

<div style="width:280px; margin-left:0px; height:45px; padding:3px 3px 3px 3px; text-align:center; background-color:#F5F5F5; border:1px solid #CCCCCC;"><span class="style1">Acessibilidade para Baixa Visão</span> <br />
                <input type="button" value="A" onclick="ap();" style="background-color:#000000; font-size:18px;  color:#FFFF00; border:none; font-weight:bold; border:#000000 1px solid;" />
                <input type="button" value="A" onclick="bp();" style="background-color:#000000; font-size:18px;  color:#FFFFFF; border:none; font-weight:bold; border:#000000 1px solid;" />
                <input type="button" value="A" onclick="ac();" style="background-color:#FFFFFF; font-size:18px;  color:#999999; border:none; font-weight:bold; border:#CCCCCC 1px solid;" />
                <input name="button" type="button" style="background-color:#FFFFFF; color:#999999; font-size:18px;  border:none; font-weight:bold; border:#CCCCCC 1px solid;" onclick="javascript:mudaFonte('mais');" value="A+" />
                <input name="button2" type="button" style="background-color:#FFFFFF; color:#999999; font-size:18px;  border:none; font-weight:bold; border:#CCCCCC 1px solid; " onclick="javascript:mudaFonte('menos');" value="A-" />
          </div>

Função javascript


<script type="text/javascript">
function ap (){
document.getElementById('tablejs').style.color='#FFFF00';
document.getElementById('tablejs').style.backgroundColor='#000000';

document.getElementById('titulo').style.color='#FFFF00';
document.getElementById('titulo').style.backgroundColor='#000000';

document.getElementByClassName('texto').style.color='#FFFF00';
document.getElementByClassName('texto').style.backgroundColor='#000000';

}

function bp (){
document.getElementById('tablejs').style.color='#FFFFFF';
document.getElementById('tablejs').style.backgroundColor='#000000';

document.getElementById('titulo').style.color='#FFFFFF';
document.getElementById('titulo').style.backgroundColor='#000000';

document.getElementById('texto').style.color='#FFFFFF';
document.getElementById('texto').style.backgroundColor='#000000';

}
function ac (){
document.getElementById('tablejs').style.color='#666666';
document.getElementById('tablejs').style.backgroundColor='#FFFFFF';

document.getElementById('titulo').style.color='#666666';
document.getElementById('titulo').style.backgroundColor='#FFFFFF';

document.getElementById('texto').style.color='#666666';
document.getElementById('texto').style.backgroundColor='#FFFFFF';

}

</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

leanhils    0

leanhils
Postado

É possivel gerar id ou class no codigo do TimyMCE, basta acrescentar a seguinte linha

extended_valid_elements : "span[id=texto|style]",

Codigo completo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript">
function ap (){
document.getElementById('tablejs').style.color='#FFFF00';
document.getElementById('tablejs').style.backgroundColor='#000000';

document.getElementById('titulo').style.color='#FFFF00';
document.getElementById('titulo').style.backgroundColor='#000000';

document.getElementById('texto').style.color='#FFFF00';
document.getElementById('texto').style.backgroundColor='#000000';

}

function bp (){
document.getElementById('tablejs').style.color='#FFFFFF';
document.getElementById('tablejs').style.backgroundColor='#000000';

document.getElementById('titulo').style.color='#FFFFFF';
document.getElementById('titulo').style.backgroundColor='#000000';

document.getElementById('texto').style.color='#FFFFFF';
document.getElementById('texto').style.backgroundColor='#000000';

}
function ac (){
document.getElementById('tablejs').style.color='#666666';
document.getElementById('tablejs').style.backgroundColor='#FFFFFF';

document.getElementById('titulo').style.color='#666666';
document.getElementById('titulo').style.backgroundColor='#FFFFFF';

document.getElementById('texto').style.color='#666666';
document.getElementById('texto').style.backgroundColor='#FFFFFF';

}

</script>


</head>

<body>




<div style="width:280px; margin-left:0px; height:45px; padding:3px 3px 3px 3px; text-align:center; background-color:#F5F5F5; border:1px solid #CCCCCC;"><span class="style1">Acessibilidade para Baixa Visão</span> <br />
                <input type="button" value="A" onClick="ap();" style="background-color:#000000; font-size:18px;  color:#FFFF00; border:none; font-weight:bold; border:#000000 1px solid;" />
                <input type="button" value="A" onClick="bp();" style="background-color:#000000; font-size:18px;  color:#FFFFFF; border:none; font-weight:bold; border:#000000 1px solid;" />
                <input type="button" value="A" onClick="ac();" style="background-color:#FFFFFF; font-size:18px;  color:#999999; border:none; font-weight:bold; border:#CCCCCC 1px solid;" />
                <input name="button" type="button" style="background-color:#FFFFFF; color:#999999; font-size:18px;  border:none; font-weight:bold; border:#CCCCCC 1px solid;" onClick="javascript:mudaFonte('mais');" value="A+" />
                <input name="button2" type="button" style="background-color:#FFFFFF; color:#999999; font-size:18px;  border:none; font-weight:bold; border:#CCCCCC 1px solid; " onClick="javascript:mudaFonte('menos');" value="A-" />
</div>

<div id="tablejs">

<p> </p>
<table style="height: 21px;" width="414">
  <tbody>
    <tr>
      <td><span id="texto" style="background-color: #0000ff;">BBBBBBBBB</span></td>
      <td><span id="texto" style="background-color: #808000;">CCCCCCC</span></td>
      <td><span id="texto" style="background-color: #333300;">EEEEEEEEEEE</span></td>
    </tr>
  </tbody>
</table>
<p> </p>

</div>

</body>
</html>

Quem poderá me ajudar

Compartilhar este post

Link para o post
Compartilhar em outros sites

leanhils    0

leanhils
Postado

Não funcionou,

 

como faz para remover esse codigo style="background-color: #333300; pelo javascript, pois esse codigo esta deixando a cor de fundo fixa, preciso remover isso ao clicar no botão para mudar a cor

Compartilhar este post

Link para o post
Compartilhar em outros sites

leanhils    0

leanhils
Postado

Mudei para class e o codigo parou de funcionar completamente, segue o codigo se alguem achar o erro me avise

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript">
function ap (){
document.getElementsByClassName('tablejs').style.color='#FFFF00';
document.getElementsByClassName('tablejs').style.backgroundColor='#000000';

document.getElementsByClassName('titulo').style.color='#FFFF00';
document.getElementsByClassName('titulo').style.backgroundColor='#000000';

document.getElementsByClassName('texto').style.color='#FFFF00';
document.getElementsByClassName('texto').style.backgroundColor='#000000';

}

function bp (){
document.getElementsByClassName('tablejs').style.color='#FFFFFF';
document.getElementsByClassName('tablejs').style.backgroundColor='#000000';

document.getElementsByClassName('titulo').style.color='#FFFFFF';
document.getElementsByClassName('titulo').style.backgroundColor='#000000';

document.getElementsByClassName('texto').style.color='#FFFFFF';
document.getElementsByClassName('texto').style.backgroundColor='#000000';

}
function ac (){
document.getElementsByClassName('tablejs').style.color='#666666';
document.getElementsByClassName('tablejs').style.backgroundColor='#FFFFFF';

document.getElementsByClassName('titulo').style.color='#666666';
document.getElementsByClassName('titulo').style.backgroundColor='#FFFFFF';

document.getElementsByClassName('texto').style.color='#666666';
document.getElementsByClassName('texto').style.backgroundColor='#FFFFFF';

}

</script>


</head>

<body>




<div style="width:280px; margin-left:0px; height:45px; padding:3px 3px 3px 3px; text-align:center; background-color:#F5F5F5; border:1px solid #CCCCCC;"><span class="style1">Acessibilidade para Baixa Visão</span> <br />
                <input type="button" value="A" onClick="ap();" style="background-color:#000000; font-size:18px;  color:#FFFF00; border:none; font-weight:bold; border:#000000 1px solid;" />
                <input type="button" value="A" onClick="bp();" style="background-color:#000000; font-size:18px;  color:#FFFFFF; border:none; font-weight:bold; border:#000000 1px solid;" />
                <input type="button" value="A" onClick="ac();" style="background-color:#FFFFFF; font-size:18px;  color:#999999; border:none; font-weight:bold; border:#CCCCCC 1px solid;" />
                <input name="button" type="button" style="background-color:#FFFFFF; color:#999999; font-size:18px;  border:none; font-weight:bold; border:#CCCCCC 1px solid;" onClick="javascript:mudaFonte('mais');" value="A+" />
                <input name="button2" type="button" style="background-color:#FFFFFF; color:#999999; font-size:18px;  border:none; font-weight:bold; border:#CCCCCC 1px solid; " onClick="javascript:mudaFonte('menos');" value="A-" />
</div>

<div class="tablejs">

<p> </p>
<table style="height: 21px;" width="414">
  <tbody>
    <tr>
      <td><span class="texto" >BBBBBBBBB</span></td>
      <td><span class="texto" style="background-color: #808000;">CCCCCCC</span></td>
      <td><span class="texto" style="background-color: #333300;">EEEEEEEEEEE</span></td>
    </tr>
  </tbody>
</table>
<p> </p>

</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas M. Martins    5

Lucas M. Martins
Postado

Você poderia utilizar jquery, existe versões como o zepto que são pequenas e te deixam fazer selector fácil, mas no caso se for utilizar Javascript, vai ter que utilizar um for no getElementsByClassName, pois ele é um array...

Compartilhar este post

Link para o post
Compartilhar em outros sites

leanhils    0

leanhils
Postado

Obrigado LukasWolf7

Na correria não percebi que o getElementsByClasseName é um Array, resolvi o problema usando for em javascript

segue o codigo caso alguem precise.


var elemArray = document.getElementsByClassName('texto');
    for(var i = 0; i < elemArray.length; i++){
	   document.getElementsByClassName('texto')[i].style.color='#FFFF00';
	   document.getElementsByClassName('texto')[i].style.backgroundColor='#000000';
    }

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito