0

Buenas,

Estoy intentando asociar un valor de width dinámico, debido a que dentro de un div, tengo 2 elementos, uno con ancho fijo y el otro que quiero que me ocupe el espacio restante, para ello estoy usando este script:

<script type="text/javascript">
    var width_estado_hilo = document.getElementsByClassName("estado_hilo")[0].width;
    var width_hilo_header = document.getElementsByClassName("hilo_header")[0].width;
    var total_hilos = document.getElementsByClassName("estado_hilo").length;
    var d = document.getElementsByClassName("hilo_header");

    var ancho_info_hilo = width_hilo_header - width_hilo_header;

    for (var i=0; i<total_hilos; i++ ) {
        d[i].style.width = ancho_info_hilo;
    }
</script>

Las variables width_estado_hilo y width_hilo_header me devuelven undefined en vez de un valor numérico. En el código CSS tienen ya un ancho predefinido, pero aún así no me devuelve ningún valor.

El motivo de que coja el primer elemento es porque todos los elementos con esa clase tienen el mismo ancho, puesto que es una estructura que se repite una y otra vez:

                echo "<div class='topic'>";
                    echo "<div class='hilo_header'>";
                        echo "<div class='estado_hilo'>";
                            if ($hilo['chincheta'] == 1 AND $hilo['hilo_cerrado'] == 0) {
                                echo "<img class='icono_hilo' src='imagenes/hilo_fijado_leido.png'>";
                            } else if (($hilo['chincheta'] == 1 AND $hilo['hilo_cerrado'] == 1)) {
                                echo "<img class='icono_hilo' src='imagenes/icono_hilo.png'>";
                            } else {
                                echo "<img class='icono_hilo' src='imagenes/icono_hilo.png'>";
                            }
                        echo "</div>";
                        echo "<div class='info_hilo'>";
                            echo "<a rel='nofollow' href='foro.php?foro=" . $foro . "&subforo=" . $subforo . "&hilo=" . str_replace(" ", "%",$hilo['asunto']) . "&ID=" . $hilo['ID'] . "&pagina=1'>" . str_replace("<;","\"",$hilo['asunto']) . "</a>";
                            echo "<p class='creador'>Abierto por: " . $hilo['quien_comenta'] . "</p>";

                            $statement = $conexion->prepare("SELECT * FROM comentarios WHERE en_que_hilo = :en_que_hilo");
                            $statement->execute(array(":en_que_hilo" => $hilo['ID']));
                            $todos_comentarios = $statement->fetchAll();

                            $total_comentarios = count($todos_comentarios)+1; //+1 para contar el primer comentario del hilo.

                            $paginacion_total = ceil($total_comentarios/5);

                            echo "<div class='paginacion_hilo'>";

                            if ($paginacion_total <= 5 AND $total_comentarios > 1 AND $paginacion_total > 1) {
                                for ($i=1; $i <= $paginacion_total; $i++) {
                                    echo "<a href='foro.php?foro=" . str_replace(" ","%",$foro) . "&subforo=" . str_replace(" ","%",$subforo) . "&hilo=" . str_replace(" ", "%",$hilo['asunto']) . "&ID=" . $hilo['ID'] . "&pagina=" . $i . "' class='paginacion_foro_hilo'>$i</a>";
                                }
                            } else if ($paginacion_total > 5){
                                echo "<a href='foro.php?foro=" . str_replace(" ","%",$foro) . "&subforo=" . str_replace(" ","%",$subforo) . "&hilo=" . str_replace(" ", "%",$hilo['asunto']) . "&ID=" . $hilo['ID'] . "&pagina=1' class='paginacion_foro_hilo'>1</a>";

                                echo   "<p>...</p>";

                                for ($i=$paginacion_total-2; $i <= $paginacion_total; $i++) {
                                    echo "<a href='foro.php?foro=" . str_replace(" ","%",$foro) . "&subforo=" . str_replace(" ","%",$subforo) . "&hilo=" . str_replace(" ", "%",$hilo['asunto']) . "&ID=" . $hilo['ID'] . "&pagina=" . $i . "' class='paginacion_foro_hilo'>$i</a>";
                                }

                            }

                            echo "</div>";

                        echo "</div>";
                    echo "</div>";

No sé el motivo por el cual no puedo acceder a los estilos si ya están definidos.

2 respuestas 2

1

Para obtener el ancho de un elemento asignado desde CSS , Podría intentar Usar la propiedad offsetWidth

document.getElementById('miId').offsetWidth;

Además tener en cuenta que para asignar un valor al ancho o alto de un elemento es necesario la unidad de medida de esta, no solo un número.

d[i].style.width = ancho_info_hilo+ "px";
1
  • 1
    ¡Muchas gracias!
    – user27826
    Commented el 16 abr. 2017 a las 22:19
0

Para obtener o modificar el valor de un elemento CSS desde JavaScript, hay que usar la propiedad style del elemento HTML.
En caso de propiedades CSS de mas de una palabra, en vez del guion separador se usa la capitalización medial.
Por ejemplo:

var n=10;
caja.style.width="100px";
caja.style.height=n*n+"px";
caja.style.backgroundColor="red";
document.write("height="+caja.style.height);
<div id="caja"></div>

2
  • He probado con esto var width_estado_hilo = document.getElementsByClassName("estado_hilo")[0].style.width; pero no me devuelve nada.
    – user27826
    Commented el 16 abr. 2017 a las 22:10
  • Porqué ese elemento no tiene un width própio, lo herera de la class. Para obtener el width en uso usa la propiedad offetWidth, Commented el 16 abr. 2017 a las 22:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.