O con
currentStyle. También existe
runtimeStyle, pero es para estilos aplicados con JS. Al final dejo un link que explica cómo y dónde se usan, con algún ejemplo.
Aunque en este caso no es necesario usar ninguna. Ya que pasé por aquí a poner el enlace aprovecho el mensaje y te cuento por qué debes usar dos clicks,
emprear. Seguro que si te detenías a pensarlo 2 minutos también lo descubrías.
Supongamos que tienes el siguiente párrafo en el
body :
Código:
<p id="miParrafo"> QWERTYUIOP.</p>
Y en la hoja de estilos tiene asignado un color rojo, así
Código:
<style>
#miParrafo {color:red; }
</style>
Ahora se te ocurre agregar un botón que llame a la función que te permite alternar el color al párrafo entre 'rojo' y 'verde'
Código:
<input type=button id="rojoVerde" value="Alterna Color" onclick="cambia()">
Y esa función es
Código:
<script>
function cambia() {
if (document.getElementById('miParrafo').style.color == 'red') {
document.getElementById('miParrafo').style.color = 'green';
}
else {
(document.getElementById('miParrafo').style.color = 'red';
}
}
</script>
La lógica es así :
"Si en el documento hay un elemento con el identificador 'miParrafo' que tiene el estilo de color 'red', entonces al elemento con el identificador 'miParrafo' se le pone el estilo de color 'green'; de cualquier otra forma, al elemento con el identificador 'miParrafo' se le pone el estilo de color 'red'."
El punto, tal como explicaron más arriba, es que en nuestro ejemplo el elemento no tiene metido ningún estilo, porque se lo damos desde la etiqueta
<style>. Para que "
(getElementById('miParrafo')" lo encuentre debería estar como
Código:
<p ... style="color: red;">
Por lo tanto, a la pregunta del escript sobre si la condición de "
getElementById('miParrafo').style.color" es igual a "
red", la respuesta será
No, ni "
red", ni "
green", ni nada. Porque no tiene ningún "
style=''" como atributo.
Así que la función toma el siguiente camino, que es ponerle en forma dinámica el "
style='color: red;'".
Ahora sí tiene el atributo, pero para quien lo mira, con ese atributo no cambia nada, porque desde la hoja de estilos o desde un estilo
in line el texto sigue de color rojo. Entonces en el siguiente click ya encuentra el atributo con su valor; y como es
'red' lo cambia a
'green'.
La solución es la más simple de todas :
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>ALTERNA ENTRE ROJO Y VERDE.</title>
<script type="text/javascript">
function cambia() {
if ((document.getElementById('miParrafo').style.color) == 'green') {
document.getElementById('miParrafo').style.color = 'red';
}
else {
document.getElementById('miParrafo').style.color = 'green';
}
}
</script>
<style type="text/css">
#miParrafo {color:red; }
</style>
</head>
<body>
<p id="miParrafo"> QWERTYUIOP.</p>
<input type=button value="Alterna Color" onclick="cambia()">
</body>
</html>
