6

Quiero establecer el border-radius de un div utilizando JavaScript, este script (ver abajo) lo que hace es cambiar de color un div de 500x500 cada vez que se actualiza el DOM:

function show_pattern(){
    var top_position = 25, left_position = 25; 
    var width = 500, height = 500;
    var color_list = ["red","orange","yellow","green","blue","indigo","violet"];
    var the_body = document.getElementById("theBody");
    var border_radius = 20;

    while(width > 50) {
        var this_div = document.createElement("div");
        var random_color = Math.random() * 7;

        random_color = Math.floor(random_color);
        this_div.style.top = top_position + "px";
        this_div.style.left = left_position + "px";
        this_div.style.width = width + "px";
        this_div.style.height = height + "px";    
        //  this_div.border-radius = border_radius + "px";
        this_div.style.background = color_list[random_color];
        the_body.appendChild(this_div);
        top_position += 10; left_position += 10;
        width -= 20; height -= 20; border_radius -=20;
    }
}

He comentado la sentencia errónea para que se pueda ver el punto en el que me he quedado y lo que quiero realizar.

¿Cómo se escribiría bien esto? this_div.border-radius = border_radius + "px";

Lo he puesto en un JS Bin por si se entiende mejor: Color script

function show_pattern() {
  var top_position = 25,
    left_position = 25;
  var width = 500,
    height = 500;
  var color_list = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
  var the_body = document.getElementById("theBody");
  var border_radius = 20;

  while (width > 50) {
    var this_div = document.createElement("div");
    var random_color = Math.random() * 7;

    random_color = Math.floor(random_color);
    this_div.style.top = top_position + "px";
    this_div.style.left = left_position + "px";
    this_div.style.width = width + "px";
    this_div.style.height = height + "px";
    // this_div.border-radius = border_radius + "px";
    this_div.style.background = color_list[random_color];
    the_body.appendChild(this_div);
    top_position += 10;
    left_position += 10;
    width -= 20;
    height -= 20;
    border_radius -= 20;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="3">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS color script</title>
  <style>
    div {
      position: absolute;
    }
  </style>
</head>

<body id="theBody" onload="show_pattern()">
</body>

</html>

1
  • @rnrneverdies Gracias por las mejoras ... ; he editado un poco más intentando seguir la labor de comprensión.
    – FRMonteira
    Commented el 21 dic. 2015 a las 4:50

1 respuesta 1

1

Debes usar element.style.borderRadius

this_div.style.borderRadius = border_radius + "px";

Aquí te dejo el ejemplo funcionando como creo que quieres:

Ademas hice este cambio, establecí el borderRadius al 50% para que se formen los círculos.

function show_pattern() {
  var top_position = 25,
    left_position = 25;
  var width = 500,
    height = 500;
  var color_list = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
  var the_body = document.getElementById("theBody");

  while (width > 50) {
    var this_div = document.createElement("div");

    var random_color = Math.random() * 7;
    random_color = Math.floor(random_color);
    this_div.style.background = color_list[random_color];
    this_div.style.top = top_position + "px";
    this_div.style.left = left_position + "px";
    this_div.style.width = width + "px";
    this_div.style.height = height + "px";    
    this_div.style.borderRadius = "50%";
    the_body.appendChild(this_div);
    top_position += 10;
    left_position += 10;
    width -= 20;
    height -= 20;
    
  }
}

show_pattern()
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS color script</title>
  <style>
    div {
      position: fixed;
    }
  </style>
</head>

<body id="theBody" onload="show_pattern()">
</body>

</html>

1
  • Ok, ya lo tengo, si lo que quiero es un círculo sería algo así como: var border_radius = 50; this_div.style.borderRadius = border_radius + "%";
    – FRMonteira
    Commented el 21 dic. 2015 a las 3:29

Tu Respuesta

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

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