Javascript - Как изменить свойство КАС класса

вот что я пытаюсь сделать:Javascript - Как изменить свойство КАС класса

Я хочу ширину определенного DIV менять каждый раз, когда я изменить размер окна. Свойства класса div находятся во внешнем документе css с именем класса .nav.

В HTML: <body onResize="nav_resize()">

В JS:

var w= window.innerWidth, h= window.innerHeight; 
 
var nav= document.getElementsByClassName('nav'); 
 

 

 
function nav_resize(){ 
 
\t if (w<700){ nav.style.width= w-150;} 
 
}

\t .nav{ background-color:#5F1C1C; 
 
\t \t position:fixed; 
 
\t \t float:left; 
 
\t \t width:190px; 
 
\t \t min-width:85px; 
 
\t \t top:105px; 
 
\t \t height:100vh; 
 
\t \t overflow:hidden; 
 
\t \t z-index:1; }

Я знаю, что я делаю что-то неправильно, так как ничего не происходит, когда попробовать его в браузер.
Любая помощь приветствуется.

источник

2015-03-17 Mr P

'document.getElementsByClassName ('нав');' возвращает массив ... так 'нав [0] .style.width = W-150;' –

... + вам нужно создать единицу типа 'px' при настройке' style'. – Teemu

Как я могу добавить элемент в .style? –

Для управления такого рода изменения размера событий используют @media CSS rule

@media only screen and (min-width: 700px) { 
    // CSS style for +700px 
} 

@media only screen and (max-width: 700px) { 
    // CSS style for -700px 
}

Это позволит избежать вам проблем с изменением размера и от меньшего к больше и наоборот.

источник

2015-03-17 09:00:58

Работает, и проще использовать css для тривиальных такие вещи. Спасибо! –

спасибо @MrP, я любил правило '@ media', когда я его обнаружил, прост, понятен и отлично работает, когда во время тестирования производятся экстремальные и радикальные изменения размеров. :) –

getElementsByClassName возвращает нодлист. Так что либо использовать

document.getElementsByClassName('nav')[0];

или

document.querySelector(".nav")

var w= window.innerWidth, h= window.innerHeight; 
var nav= document.getElementsByClassName('nav')[0]; 



function nav_resize(){ 
    if (w<700){ nav.style.width= (w-150)+"px";} 
}

источник

2015-03-17 08:57:48 mohamedrias

Я пробовал оба ваших решения, но, к сожалению, не работал –

Вам нужно получить измененную ширину окна в resize event listener и nav из списка.

var w= window.innerWidth, h= window.innerHeight; 
 
var nav= document.getElementsByClassName('nav')[0]; // get nav element from list 
 

 

 
function nav_resize(){ 
 
    w= window.innerWidth; // get updated window width after resize. 
 
\t if (w<700){ nav.style.width= w-150 ;} 
 
}

источник

2015-03-17 09:28:57

Я пробовал, но это не сработало. Я боюсь –

Можете ли вы поделиться полным html-кодом, который вы пробовали. Я пробовал это, и он работает. –

Javascript - Как изменить свойство КАС класса

ответ

Смежные вопросы