Элементы 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, время: 19:47. |