@Alex931

Как менять положение блоков на странице по горизонтали-вертикали при нажатии на кнопку?

Здравствуйте. Есть страница с контентом. Нужно, чтобы блоки с текстом меняли положение с горизонтального на вертикального и обратно при нажатии на кнопку.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Лонгрид</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="page-container">
            <div class="page-main">
                <h1 id="main">Lorem ipsum</h1>
            </div>
            <div class="page-blocks" id="all page">
                <div class="page-left">
                    <div class="page-left-up" id="block-element">
                        <div class="up-block">

                        </div>
                        <div class="block">
                            <p class="intro intro-up">
                                Заголовок 2 типа немного длиннее
                            </p>
                        </div>
                    </div>
                    <div class="block" id="block-element">
                        <button type="button" class="btn btn-outline-success intro" onclick="togFunc('text')">
                            <span>
                                С картинкой
                            </span>
                        </button>
                    </div>
                </div>
                <div class="block block-center" id="block-element">
                    <p class="intro">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Maiores, veritatis rem rerum deserunt quae, non atque labore
                        eveniet sint mollitia consequuntur sed nostrum nesciunt?
                        Excepturi illum totam quaerat consequatur asperiores mollitia,
                        eligendi cum eaque illo pariatur necessitatibus eum molestiae
                        temporibus itaque dicta inventore reiciendis. Mollitia in magni
                        nulla deleniti quasi?
                    </p>
                </div>
                <div id="text">
                    <img src="Plane.jpg" alt="" class="block-image">
                </div>
            </div>
        </div>
        <div class="settings">
            <form>
                <input type="text" placeholder="Установить ширину всего контейнера" class="input-page-width element">
                <input type="text" placeholder="Установить ширину блока" class="input-width element">
                <input type="text" placeholder="Установить высоту блока" class="input-height element">
            </form>
            <br>
            <button class="set-width-btn element button">Применить</button>
            <button class="fontSizePlus button">Увеличить шрифт (по умолчанию 16px)</button>
            <button class="fontSizeMinus button">Уменьшить шрифт</button>
            <button class="color button">Изменить цвет заголовка</button>
            <button class="text-color button">Изменить цвет текста в блоках</button>
            <button class="back-color button">Цвет 1 блока</button>
            <button class="flex">Положение элементов</button>
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>


body {
    font-size: 16px;
}

input {
    width: 300px;
    padding: 12px 18px;
}

button {
    cursor: pointer;
}

.container {
    max-width: 700px;
    display: flex;
    flex-direction: row;
}

.page-container {
    display: flex;
    flex-direction: column;
}

.up-block {
    background-color: blue;
    margin-top: 10px;
    width: 50px;
    height: 50px;
}

.page-left-up {
    display: flex;
    flex-direction: row;
    white-space: normal;
    min-width: 250px;
    background-color: lightblue;
    padding: 10px;
    margin-top: 20px;
}

.intro-up {
    margin-left: 20px;
}

.page-left {
    display: flex;
    flex-direction: column;
}

.btn {
    width: 100%;
    background-color: white;
    padding: 20px;
    text-align: left;
    margin-top: 20px;
}

#main {
    text-align: center;
}

.block-center {
    width: 300px;
    margin-left: 20px;
}

.page-blocks {
    display: flex;
    flex-direction: row;
}

.box {
    float: left;
    background: #f2f2f2;
    border: 1px solid #ccc;
}

.block:not(:last-child) {
    margin-right: 50px;
}

.block-image {
    width: 200px;
    height: 200px;
}

.settings {
    width: 500px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 50px;
    background-color: lightgrey;
}

.element:not(:last-child) {
    margin-bottom: 20px;
}

.settings-font {
    display: flex;
    flex-direction: column;
}

.button {
    background-color: white;
    border-radius: 5px;
    border: 1px solid black;
    white-space: nowrap;
    padding: 12px 18px;
    color: black;
    width: 340px;
}

button:not(:last-child) {
    margin-bottom: 20px;
}


// Меняем положение элементов

function togFlex(id) {

    elem = document.getElementById(id);

    state = elem.style.flexDirection;
    
    if (state = 'row') elem.style.flexDirection = 'column';
    
    else elem.style.flexDirection = 'row';
}



const flex = document.querySelector('.flex');

flex.addEventListener('click', function () {

    (flex.innerHTML === 'row') ?
    flex.innerHTML = 'column' :
    flex.innerHTML = 'row';
})


У класса .page-blocks при нажатии на кнопку должно меняться flex-direction с row на column и наоборот.

https://codepen.io/alexanderr-prog/pen/NWyvQJZ

В самом конце код js написал, но работает только изменение текста внутри кнопки, а блоки не меняют своего положения. Подскажите, как сделать, чтобы код заработал.
  • Вопрос задан
  • 86 просмотров
Решения вопроса 1
Dr_Elvis
@Dr_Elvis
В гугле забанен
// Меняем положение элементов

function togFlex(classname, state) {
    elem = document.getElementsByClassName(classname)[0];
    elem.style.flexDirection = state;
}

const flex = document.querySelector('.flex');
flex.addEventListener('click', function () {
    if(flex.innerHTML === 'row'){
      flex.innerHTML = 'column';
      togFlex('page-blocks', 'column');
    }
    else{
      flex.innerHTML = 'row';
      togFlex('page-blocks', 'row');
  }
})
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
noder_ss
@noder_ss
Человек хороший, вёрстка по душе
как я понимаю, нужно по клику делать переворот, вот.
let btn = document.querySelector('.кнопка по классу')
let elem = document.querySelector('.Элемент по классу')
btn.onclick = function(){
elem.classList.toggle('класс')
}
css:
класс elem.класс{
transform: rotate(180deg);
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы