Prioridad de Estilos

CdG · #1 (**permalink**) 10/01/2013, 12:05

Que tal gente,
tengo el siguiente código:

Código HTML:

Ver original<!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" lang="es">
<head>
<style type="text/css">
.campo {
  float : left;
  text-align : right;
}
</style>
<script type="text/javascript">
function through(target) {
  target.parentNode.parentNode.style.textDecoration = "line-through";
}
</script>
</head>
<body>
<table border="1">
  <tr>
    <td>
      <table border="1">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table border="1">
        <tr><!-- Aquí aplico el estilo -->
          <td><div onclick="through(this);">campo1</div></td>
          <td><div class="campo">campo2</div></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Lo que intento hacer es que al hacer click en campo1, le aplique a todas las celdas de esa misma tabla la propiedad line-through, osea que al tr que he comentado le agrego el estilo text-decoration:line-through;a través de la función through()
Todo funciona bien, pero al agregar a .campo la propiedad float : left, esa columna no toma el estilo asignado por la función. Por que?
Bueno, espero que se entienda, saludos y gracias.

chicohot20 · #2 (**permalink**) 10/01/2013, 15:38

Q Extraño!

Prueba así:

Código HTML:

Ver original<!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" lang="es">
<head>
<style type="text/css">
.campo {
  float : left;
  text-align : right;
}
.line-through div{text-decoration: line-through;}
</style>
<script type="text/javascript">
function through(target) {
  target.parentNode.parentNode.setAttribute("class", "line-through"); 
}
</script>
</head>
<body>
<table border="1">
  <tr>
    <td>
      <table border="1">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table border="1">
        <tr><!-- Aquí aplico el estilo -->
          <td><div onclick="through(this);">campo1</div></td>
          <td><div class="campo">campo2</div></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

CdG · #3 (**permalink**) 11/01/2013, 08:01

perfecto! gracias