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>