0

У меня есть таблица, по умолчанию она имеет размер 2x2, ee grid-template-rows: 20vh 20vh; и grid-template-columns: 30vw 30vw.

У меня есть родительский контейнер, который и является этой таблицей 2х2. В нем есть 4 дива, которые является ячейками таблицы. В каждом из этих дивов есть 1 скрытый див(у которого display:none;), и кнопка, при нажатии на который, должен показываться соседний с ней скрытый div. Но проблема в том, что мой скрытый div, содержит в себе iframe, который просто не помещается в таблицу с ее размерами 2x2, а постоянно держать таблицу в нужном мне размере - просто поливание сайта водой, т.к. места нужно ОЧЕНЬ много(размер iframe: width: 87vw; heigth: 89vh, а уменьшить нельзя, становиться неюзабельно); И я пришел к решению которое я уже описал: увеличивать размер контейнера.

Но контейнера у нас 4, и нужно сделать так, чтобы при открытии одного контейнера(увеличении его размера) все остальные контейнеры оставались своих размеров(до открытия: grid-template-rows: 20vh 110vh 20vh 20vh; а после открытия: grid-template-rows: 110vh 110vh 20vh 20vh). Как было показано в этом GIF: https://i.postimg.cc/QNB8tq9M/image.gif

А сама проблема в том, что почему-то, let result = document.getElementById("projects-grid").style.gridTemplateRows; возвращает пустую строку(проверено дебагом IntelliJ IDEA). Почему она возвращает пустую строку? Или как можно сделать эту задачу по другому?

Думаю, суть задачи объяснил понятно, если непонятно, то есть комментарии.

Мой код:

HTML:

<div id="projects-grid">
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Go to Tribute page</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(0)">
                        <p id="first-show-p">Click to open site</p>
                    </button>
                    <div id="first-hidden" class="hidden">
                        <!-- <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt=""> -->
                        <iframe src="https://codepen.io/YouAreMe12/full/bGRdxZg" frameborder="0"></iframe>
                    </div>
                </div>
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Survey form</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(1)">
                        <p class="show-para">Click to open site</p>
                    </button>
                    <div id="second-hidden" class="hidden">
                        <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                    </div>
                </div>
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Product landing page</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(2)">
                        <p class="show-para">Click to open site</p>
                    </button>
                    <div id="third-hidden" class="hidden">
                        <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                    </div>
                </div>
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Technical documentation page</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(3)">
                        <p class="show-para">Click to open site</p>
                    </button>
                    <div id="forth-hidden" class="hidden">
                        <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                    </div>
                </div>
            </div>

CSS:

#projects-grid {
  display: grid;
  grid-template-columns: 30vw 30vw;
  grid-template-rows: 20vh 20vh;
  grid-gap: 9rem;
  margin: 0 auto 6rem;
}
.project-tile {
  background: var(--main-gray);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  margin: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  border: 1px solid cyan;
}
#first-hidden {
  display: none;
}
#second-hidden {
  display: none;
}
#third-hidden {
  display: none;
}
#forth-hidden {
  display: none;
}
iframe {
  border-radius: 5px;
  width: 87vw;
  height: 89vh;
  border-bottom: 7px solid var(--main-white);
}

JS:

const firstDisplay = document.getElementById("first-hidden").style.display;
const secondDisplay = document.getElementById("second-hidden").style.display;
const thirdDisplay = document.getElementById("third-hidden").style.display;
const forthDisplay = document.getElementById("forth-hidden").style.display;

function buttonClick(id) {
    //turn on
    let rowsHeight = getRowsHeight();
    if (rowsHeight[id] == "20vh" || rowsHeight[id] == "20vh ") {
        show(id);
    } else {
        hide(id);
    }
}

function show(id) {
    let hidden;
    let rowsHeight = getRowsHeight();
    if (id == 0) {
        rowsHeight[0] = "110vh ";
        hidden = "first"
    } else if (id == 1) {
        rowsHeight[1] = "110vh ";
        hidden = "second"
    } else if (id == 2) {
        rowsHeight[2] = "110vh ";
        hidden = "third"
    } else {
        rowsHeight[3] = "110vh";
        hidden = "forth"
    }
    let rows = "";
    for (let i = 0; i < rowsHeight.length; i++) {
        const element = rowsHeight[i];
        rows += element;
    }
    hidden += "-hidden";
    document.getElementById(hidden).style.display = "block";
    document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
    document.getElementById("projects-grid").style.gridTemplateRows = rows;
}

function hide(id) {
    let rowsHeight = getRowsHeight();
    let hidden;
    let twoOnTwo = true;
    if (id == 0) {
        rowsHeight[0] = "20vh ";
        hidden = "first";
        twoOnTwo = false;
    } else if (id == 1) {
        rowsHeight[1] = "20vh ";
        hidden = "second";
        twoOnTwo = false;
    } else if (id == 2) {
        rowsHeight[2] = "20vh ";
        hidden = "third";
        twoOnTwo = false;
    } else if (id == 3) {
        rowsHeight[3] = "20vh";
        hidden = "forth";
        twoOnTwo = false;
    }
    document.getElementById(hidden + "-hidden").style.display = "none";
    if (twoOnTwo) {
        document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
        document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
    } else {
        let rows = "";
        for (let i = 0; i < rowsHeight.length; i++) {
            rows += rowsHeight[i];
        }
        document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
        document.getElementById("projects-grid").style.gridTemplateRows = rows;
    }
}

function getRowsHeight() {
    let result = document.getElementById("projects-grid").style.gridTemplateRows.split(" ");
    return result;
}

1 ответ 1

0

element.style - возвращает inline стиль, то есть то, что прописано непосредственно в теге через атрибут style='...' На момент первого обращения там пусто. Только потом вы устанавливаете туда значения.

Можно использовать конечно метод getComputedStyle

let elem = document.getElementById("projects-grid");
let rows = getComputedStyle(elem).gridTemplateRows;

Но он будет возвращать вам динамические данные в px. По задаче я вообще не вижу в этом смысла.

Поправил ваш JS и немного CSS. Так будет гораздо короче, но конечно же всё равно не идеально. Используйте классы чаще, не обязательно каждый раз дергать инлайн стили.

function checkHide(){
    const hidden = document.querySelectorAll('.hidden');  
  return [...hidden].every(item => !item.classList.contains('show'));
}

function buttonClick(el) {          
        const projects_grid = document.getElementById("projects-grid");
    projects_grid.classList.add('unset');    
    toggleFrame(el);        
    if (checkHide()) projects_grid.classList.remove('unset');
}

function toggleFrame(el) {
    let frame_wrapper = el.closest('.project-tile').querySelector('.hidden');
  frame_wrapper.className = frame_wrapper.classList.contains('show') ? 'hidden':'hidden show';
    
}
#projects-grid {
  display: grid;
  grid-template-columns: 30vw 30vw;
  grid-template-rows: 20vh 20vh;
  grid-gap: 9rem;
  margin: 0 auto 6rem;
}

#projects-grid.unset{  
  grid-template: unset;  
}

.project-tile {
  background: var(--main-gray);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  margin: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  border: 1px solid cyan;
}

#first-hidden {
  display: none;
}
#second-hidden {
  display: none;
}
#third-hidden {
  display: none;
}
#forth-hidden {
  display: none;
}

.hidden.show {
  display: block !important;
}


iframe {
  border-radius: 5px;
  width: 87vw;
  height: 89vh;
  border-bottom: 7px solid var(--main-white);
}
<div id="projects-grid">
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Go to Tribute page</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(this)">
                        <p id="first-show-p">Click to open site</p>
                    </button>
                    <div id="first-hidden" class="hidden">
                        <!-- <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt=""> -->
                        <iframe src="https://codepen.io/YouAreMe12/full/bGRdxZg" frameborder="0"></iframe>
                    </div>
                </div>
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Survey form</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(this)">
                        <p class="show-para">Click to open site</p>
                    </button>
                    <div id="second-hidden" class="hidden">
                        <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                    </div>
                </div>
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Product landing page</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(this)">
                        <p class="show-para">Click to open site</p>
                    </button>
                    <div id="third-hidden" class="hidden">
                        <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                    </div>
                </div>
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Technical documentation page</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(this)">
                        <p class="show-para">Click to open site</p>
                    </button>
                    <div id="forth-hidden" class="hidden">
                        <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                    </div>
                </div>
            </div>

2
  • Спасибо! Несколько дней пытался написать подобный код, но никак не получалось. Похоже вся моя проблема была в незнании JS, т.к. перед тем как начать писать задачу, я не знал о я JS практически, ничего, в курсе он идет дальше, но захотел сделать на своем сайте(который был домашним заданием) подобный функционал, а не бросал, уже чисто из принципа. (учу на FreeCodeCamp.org, и да это реклама). В любом случае спасибо. И да, классная аватарка. Commented 10 окт. 2021 в 0:21
  • @Богдан Иманкулов Не за что. Удачи! Commented 10 окт. 2021 в 4:17

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.