Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Заменить значение height в div (https://javascript.ru/forum/misc/77785-zamenit-znachenie-height-v-div.html)

_marisha 20.06.2019 13:29

Заменить значение height в div
 
Доброго времени суток!
Подскажите, пожалуйста, как в div в style заменить значение height. Спасибо.
Пример, есть элемент:
<div class="slick-track" style="opacity: 1; height: 1674px; transform: translate3d(0px, -702px, 0px);">

В данном случае в style нужно (два варианта)
1) заменить height на maxheight: 498px;
2) убрать height

_marisha 20.06.2019 13:39

var element = document.getElementsByClassName('slick-track');
    element.style.height = '400px';

В таком случае в консоли ошибка "Cannot set property 'height' of undefined"

рони 20.06.2019 13:40

_marisha,
<div class="slick-track" style="opacity: 1; height: 1674px; transform: translate3d(0px, -702px, 0px);"></div>
<script>
  let {style} = document.querySelector(".slick-track");
  style.height = "";
  style.maxWidth = "498px"
</script>

рони 20.06.2019 13:42

Цитата:

Сообщение от _marisha
var element = document.getElementsByClassName('slick-track');

это список элементов!!! нужен индекс
element[0].style.height = '400px';

_marisha 20.06.2019 13:52

рони, спасибо что откликнулись )
let{style} = document.querySelector(".slick-track");
    style.height = "400px"; // или style.height = "";

В таком случае ошибка в консоли Uncaught TypeError: Cannot destructure property `style` of 'undefined' or 'null'.

var element = document.getElementsByClassName('slick-track');
element[0].style.height = '400px';

В таком случае ошибка Uncaught TypeError: Cannot read property 'style' of undefined

рони 20.06.2019 13:57

_marisha,
рано запустили скрипт, элементов ещё нет с данным классом. ставить после инициализации слайдера.

_marisha 20.06.2019 14:01

рони, действительно, если добавить код после подключения слайдера, то в консоли ошибок нет.
Но высота не применяется :(
<script>
    $('.slider').slick({
        arrows: false,
        infinite: true,
        autoplay: true,
        Speed: 3000,
        slidesToShow: 1,
        slidesToScroll: 1,
        pauseOnHover: true,//остановка при наведении
        pauseOnFocus: true,
        focusOnSelect: true,
        variableWidth: true,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        vertical: true,
        arrows: true,
        infinite: true,
        slidesToShow: 9,
        slidesToScroll: 1,
        asNavFor: '.slider',
        pauseOnHover: true,
        pauseOnFocus: true,
        focusOnSelect: true,
        variableHeight: true,
    });
</script>
<script>
    let style = document.querySelector(".slick-track");
    style.height = "";
    style.maxheight = "498px"
</script>

рони 20.06.2019 14:53

Цитата:

Сообщение от _marisha
Но высота не применяется

где код?!!!
Цитата:

Сообщение от _marisha
let{style}


_marisha 20.06.2019 16:02

Скажите, пожалуйста, что сделано не так? (

рони 20.06.2019 16:04

_marisha,
фигурные скобки добавьте {}

_marisha 21.06.2019 05:38

рони, всё равное не применяется заданная высота :( Видимо в slick слайдере не всё так просто...
let {style} = document.querySelector(".slick-track");
    style.height = "";
    style.maxheight = "498px"

laimas 21.06.2019 07:23

Цитата:

Сообщение от _marisha
Видимо в slick слайдере не всё так просто...

А почему не контейнеру, в котором размещен слайдер, задавать макс. высоту? А у самого слайдера для доступа к нему есть и опции, и методы, и события.

рони 21.06.2019 09:40

_marisha,
скорее всего нужных вам элементов несколько и нужен цикл, также для всего этого есть настройки в самом слайдере и css, смотрите документацию.

_marisha 21.06.2019 12:49

Вложений: 2
Цитата:

Сообщение от laimas (Сообщение 509282)
А почему не контейнеру, в котором размещен слайдер, задавать макс. высоту? А у самого слайдера для доступа к нему есть и опции, и методы, и события.

- высота устанавливается автоматически и зависит от количества элементов.
Пример:
1) если выводится 7 элементов, тогда чтобы все элементы влезали в видимую область можно указать
.slick-vertical .slick-slide{transform: translate3d(0, 20px, 0);}

В таком случае все элементы становятся как нужно и активный элемент выделен белым (скрин "7 элементов")

2) а если при таком же translate3d(0, 20px, 0); выводить порядка 11 элементов, тогда не видно активного элемента (скрин "11 элементов"). Но в таком случае можно указать translate3d(0, 220px, 0), тогда активный элемент видно.
Возможно ли сделать так, чтобы если у дива
<div class="slick-track" style="opacity: 1; height: 1674px; transform: translate3d(0px, -702px, 0px);"></div>
высота больше 400px,тогда применить
.slick-vertical .slick-slide{transform: translate3d(0, 20px, 0);}
. Иначе
.slick-vertical .slick-slide{transform: translate3d(0, [B]220px[/B], 0);}

laimas 21.06.2019 13:59

Ну так работайте с объектом/элементами, в его методах при событиях нужных или инициализации. Я не помню этот слайдер наизусть, но насколько память не изменят, то у него приличное количество методов, опций, событий, вполне хватит.

_marisha 25.06.2019 12:39

Удалось решить вопрос следующим образом:
var $slider = $('.slick-vertical .slick-slide');
    if ($slider.length > '8')
    {
        $('.slick-vertical .slick-slide').css('transform','translate3d(0, 220px, 0)');
        $('.name').css('padding','8px');
        $('.title_slider').css('height','480px');
    }
    else
    {
        $('.title_slider').css('height','480px');

    }


Часовой пояс GMT +3, время: 08:33.