Показать сообщение отдельно
  #1 (permalink)  
Старый 17.12.2022, 17:50
Аспирант
Отправить личное сообщение для DenisZ Посмотреть профиль Найти все сообщения от DenisZ
 
Регистрация: 19.04.2022
Сообщений: 31

Элементы 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?
Ответить с цитированием