Элементы CSS внутри JS
Здравствуйте!
Есть 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? |
|
| Часовой пояс GMT +3, время: 04:57. |