0

Me interesa saber cómo hacer para tener la función ya cargada al entrar en la página sin tener que dar click en un botón o cargarlo en el body

function color(){
var x = document.getElementById("box");
x.className = "cajas";
}
.cajas{
background-color: #ddd;
display: flex;
justify-content: space-between;
}
.cajas > span{
width: 50px;
height: 50px;
background-color: blue;
display: block;
}
<div id="box">
<span></span>
<span></span>
<span></span>
</div>


<button onclick="color()">Color</button>

1
  • 1
    un bloque <script> con javascript, inmediatamente después de declarado el elemento ya lo puede ver y modificarlo el 23 jul. 2019 a las 0:03

1 respuesta 1

3

Simplemente llamá a la función después de declararla.

function color() {
    var x = document.getElementById("box");
    x.className = "cajas";
}
color();
.cajas{
    background-color: #ddd;
    display: flex;
    justify-content: space-between;
}
.cajas > span{
    width: 50px;
    height: 50px;
    background-color: blue;
    display: block;
}
<div id="box">
<span></span>
<span></span>
<span></span>
</div>

El HTML que recibe el navegador queda así:

<body>
  <div id="box" class="cajas">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <script type="text/javascript">
      function color() {
        var x = document.getElementById("box");
        x.className = "cajas";
      }
      color();
  </script>

  <div class="as-console-wrapper"><div class="as-console"></div></div>
</body>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.