Здравствуйте!
Есть HTML-код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div id="cont1">
<div id="cont2"></div>
<div id="cont4"></div>
<div id="cont3"></div>
</div>
<div id="cont5"><img id="img"></div>
<script src="js/index.js"></script>
</body>
</html>
Есть также CSS:
body {
font-family:monospace;
font-size:large;
background: #beded1;
}
#cont1{
width: 70%;
height: auto;
margin: 0 auto;
margin-top: 9%;
padding: 10px;
background: #ffffff;
border-radius: 7px;
text-align: center;
}
#cont2,
#cont3{
position: relative;
width:30%;
display:inline-flex;
flex-direction: row;
justify-content:space-evenly;
}
#cont4{
width: 30%;
height: 100%;
display:inline-flex;
justify-content:space-evenly;
}
#cont5{
width: auto;
height: auto;
text-align:center;
z-index: -2;
margin-top: -11%;
}
Ну и, конечно, JS:
let animals1 = ["Crocodile", " Elephant", " Tiger"];
let animals2 = ["Rhino", " Antelope", " Warthog"];
let obj = document.getElementById("cont2");
obj.innerHTML = (animals1.join(" | "));
obj.setAttribute("justify-content", "space-between");
let obj1 = document.getElementById("cont3");
obj1.innerHTML = (animals2.join(" | "));
obj1.setAttribute("justify-content", "space-evenly");
const img = document.querySelector("img");
img["src"] = "https://pngimage.net/wp-content/uploads/2018/05/animasi-hewan-png-8.png";
img.setAttribute('margin-top', '-10%');
let obj2 = document.getElementById('cont5');
obj2.setAttribute('z-index', "-2", 'margin-top', '-50%');
Первый вопрос в следующем: я делаю div с картинкой над div с текстом с помощью CSS. Можно ли CSS-свойства div с картинкой корректно прописать внутри JS?
Второй вопрос: как можно внутри JS корректно прописать flex для элементов массивов JS?
