Как задать стили родительскому элементу?

Question

LastGeneral @LastGeneral

Как задать стили родительскому элементу?

Дочернему элементу, по нажатию на кнопку, присваивается класс active, как в этом случае задать стили родительскому элементу?

Вопрос задан более трёх лет назад
224 просмотра

6 комментариев

Подписаться 1 Простой 6 комментариев

Решения вопроса 1

8 комментариев

LastGeneral @LastGeneral Автор вопроса
Возможно нужно более подробно описать,

Класс .active присваивается когда нажать на бургер, появляется меню, и мне нужно header менять bg, тот вариант что Вы написали не работает.
Вот похожий, тоже не работает

jQuery('.active').parent('.header').addClass('header-bg')
Написано более трёх лет назад

Sedbol @Sedbol

LastGeneral, Если я вас правильно понял вы это имели введу?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            width: 400px;
            height: 400px;
            background: green;
        }
        .list{
            width: 100px;
            height: 100px;
            background: #00B7FF;
        }
        .header.bg{
            background: red ;
        }
    </style>
</head>
<body>


<header class="header">
    <div class="list"></div>
</header>

<script>
    let list =document.getElementsByClassName('list')[0];
    setTimeout(()=>list.parentElement.classList.add('bg'),2000)

</script>

</body>

Написано более трёх лет назад

Sedbol @Sedbol

LastGeneral, Либо не добавлять а изменить класс list.parentElement.classList="header-bg"

Написано более трёх лет назад
LastGeneral @LastGeneral Автор вопроса

Sedbol, https://codepen.io/constantin-andreevich/pen/YzqzebK Вот, пример
Задача простая, как бы, но решить не могу, по сути нужно что бы header менял цвет после открытия меню

Написано более трёх лет назад

Sedbol @Sedbol

LastGeneral,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        *::before,
        *::after {
            box-sizing: border-box;
        }
        body {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            position: relative;
            font-family: 'Roboto', sans-serif;
        }

        h3 {
            padding: 0 0 2em;
            text-align: center;
            font-size: 1.5em;
            font-weight: 700;
            text-transform: uppercase;
        }
        ul {
            margin: 0;
            padding: 0;
        }
        li {
            list-style-type: none;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        img  {
            width: 100%;
        }
        /* header */
        .header {
            position: fixed;
            width: 100%;
            padding: 0.5em 4em;
            background: #0000008a;
            z-index: 2;
        }
        .header-bg {
            position: fixed;
            width: 100%;
            padding: 0.5em 4em;
            background: #0000008a;
            z-index: 2;
            background: red;
        }

        .site-branding {
            display: inline-block;
        }
        .site-branding img {
            width: 185px;
            height: 47px;
        }
        nav#site-navigation {
            display: flex;
            align-items: center;
            float: right;
        }
        ul#primary-menu {
            display: flex;
        }
        ul#primary-menu li {
            padding: 0.5em;
            font-size: 1.3em;
        }
        ul#primary-menu li a {
            color: #fff;
        }
        .header-phone {
            padding: 0.5em;
            text-align: center;
        }
        .header-phone a {
            font-size: 1.3em;
            color: #fff;
        }
        /* .header:has( .active ) {
               background-color: #24252a;
        } */
        /* burger */
        .main-navigation {
            transition: all .6s ease-in-out;
        }
        .main-navigation.active {
            left: 0;
        }
        .burger {
            display: none;
        }
        .line {
            width: 35px;
            height: 5px;
            background-color: #fff;
            margin-bottom: 5px;
            border-radius: 5px;
        }
        /* hero */
        .hero {
            height: 100vh;
            wight: 100%;
            background: url(https://www.ejin.ru/wp-content/uploads/2017/09/1-716.jpg);
        }
        @media only screen and (max-width: 900px) {
            .main-navigation {
                display: block!important;
                position: absolute;
                top: 4rem;
                left: -100%;
                width: 100%;
                height: 100vh;
                background-color: #24252a;
            }
            .main-navigation ul {
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            .main-navigation ul li {
                padding: 1em;
                width: 100%;
                font-size: 2em;
                text-align: center;
            }
            .main-navigation ul li a {
                display: block;
            }
            .burger {
                display: inline-block;
                padding-top: 0.8em;
                float: right;
                cursor: pointer;
            }
        }
        /* responsive */
        @media (max-width: 900px) {
            .header-phone {
                padding: 1em 0.5em;
                font-size: 1.5em;
                text-align: center;
            }
            ul#primary-menu li {
                padding: 1em 0.5em;
                font-size: 2em;
            }
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>

<header class="header">
    <div class="site-branding">
        <a href="#" class="custom-logo-link" rel="home">1</a>
    </div>
    <nav id="site-navigation" class="main-navigation">
        <div class="menu-menu-1-container">
            <ul id="primary-menu" class="menu">
                <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-10">
                    <a href="#" aria-current="page">Главная</a>
                </li>
                <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-12">
                    <a href="/#services" aria-current="page">Услуги</a></li>
                <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="#/сontacts/">Контакты</a></li>
            </ul>
        </div>
    </nav>
    <div class="burger">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
    </div>
</header>
<div class="hero">
</div>

<script>


    document.querySelector('.burger').addEventListener('click', (e) => {     
        e.preventDefault();
        document.querySelector('.main-navigation').classList.toggle('active');
        document.querySelector('.header').classList.toggle("header-bg");
    });
</script>

</body>
</html>

Написано более трёх лет назад

LastGeneral @LastGeneral Автор вопроса

Спасибо Вам большое!

Написано более трёх лет назад
Sedbol @Sedbol

LastGeneral, Можно и так еще snippet

Написано более трёх лет назад

Sedbol @Sedbol

LastGeneral, Не знаю понадобится вам или нет? Я бы изменил
CSS и дополнил JS что бы было так

СSS:

.hero {
            background: url(https://www.ejin.ru/wp-content/uploads/2017/09/1-716.jpg) no-repeat;
            -moz-background-size: 100%; /* Firefox 3.6+ */
            -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
            -o-background-size: 100%; /* Opera 9.6+ */
            background-size: 100%; /* Современные браузеры */
        }

JS:

window.onload=function(){
        const hero=document.getElementsByClassName('hero')[0];
        hero.style.width=screen.width+'px';
        hero.style.height=screen.height+'px';

    };

А то как у вас имею такой вид

Не знаю пригодиться это в вашем проекте или нет? Но все же

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Как отсортировать в ХТМЛ по дате рождения от младшего к старшему, а так же, нумерацию их 1,2,3,4. Чтобы можно было потом добавить еще людей?
- 1 подписчик
- 2 часа назад
- 24 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Почему шрифт в JS prompt() белого цвета?
- 1 подписчик
- 5 часов назад
- 39 просмотров
2

ответа
HTML

+1 ещё

Простой
При загрузке картинки этот блок не имеет размера, как исправить?
- 1 подписчик
- 6 часов назад
- 42 просмотра
0

ответов
JavaScript

Простой
Выдает ошибку, сам файл не нулл(а ошибка выдается там где подключается жс), как исправить?
- 1 подписчик
- 6 часов назад
- 42 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 6 часов назад
- 150 просмотров
1

ответ
JavaScript

Простой
Какой фреймворк использовать для форм JS?
- 1 подписчик
- 6 часов назад
- 48 просмотров
0

ответов
JavaScript

Простой
Почему change срабатывает раньше чем click?
- 1 подписчик
- 7 часов назад
- 60 просмотров
1

ответ
CSS

Простой
Как убрать отступ?
- 1 подписчик
- 9 часов назад
- 90 просмотров
2

ответа
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 11 часов назад
- 39 просмотров
1

ответ
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 13 часов назад
- 21 просмотр
0

ответов
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Доработать клиентское приложение для GTA 5 на C#

20 апр. 2024, в 00:51

1000 руб./за проект

Верстка и логика формы выбора билетов в зале для покупки

20 апр. 2024, в 00:43

10000 руб./за проект

Разработать формирование УПД на Java

20 апр. 2024, в 00:28

20000 руб./за проект

parentNode либо parentElement
https://learn.javascript.ru/dom-navigation#sosedi-...
LastGeneral, что не получается?
Классы присваивать вы умеете.
Как найти родителя я написала.
Ankhena,
Возможно нужно более подробно описать,

Класс .active присваивается когда нажать на бургер, появляется меню, и мне нужно header менять bg.
LastGeneral, и как вы это делаете, что у вас не получается? (jsfiddle.net или codepen.io)
В вашей ситуации проще не искать родителя, а обращаться напрямую к нужному элементу (.header) и задавать ему класс.
https://codepen.io/constantin-andreevich/pen/YzqzebK
Просто хочу что бы header становился темным, когда открывается меню

Answer 1 · 2020-08-05 17:18:32

Вот пример!!! Предыдущий комментатор вам сказал все верно

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 400px;
            height: 400px;
            background: green;
        }
        .list{
            width: 100px;
            height: 100px;
            background: #00B7FF;
        }
    </style>
</head>
<body>


<div class="one">
    <div class="list"></div>
</div>

<script>
    let list =document.getElementsByClassName('list')[0];
    setTimeout(()=>list.parentElement.style.background="red",2000)
    
</script>

</body>
</html>

Как задать стили родительскому элементу?

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

Минуточку внимания

Войдите на сайт