I can not set a width with javascript

Question

I can not set a width with javascript

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Good morning,

I'm trying to associate a dynamic width value, because within a div, I have 2 elements, one with fixed width and the other that I want to occupy the remaining space, for this I'm using this 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>

The variables width_estado_hilo and width_hilo_header return undefined instead of a numeric value. In the CSS code they already have a predefined width, but even then it does not return any value to me.

The reason that it takes the first element is because all the elements with that class have the same width, since it is a structure that is repeated again and again:

                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>";

I do not know the reason why I can not access the styles if they are already defined.

javascript

asked by JetLagFox 16.04.2017 в 23:54

source

2 answers

1

To obtain or modify the value of a CSS element from JavaScript, use the style property of the HTML element.
In case of CSS properties of more than one word, medial capitalization is used instead of the separator script.
For example:

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>

answered by 17.04.2017 в 00:03

Python: Error: "function" object is not iterable CSS syntax alerts in ES [closed]

score 2 · Accepted Answer

To get the width of an element assigned from CSS , I could try using the property offsetWidth

document.getElementById('miId').offsetWidth;

Also keep in mind that to assign a value to the width or height of an element is necessary the unit of measurement of this, not just a number.

d[i].style.width = ancho_info_hilo+ "px";