Javascript

Question

这是我正在尝试做的事情：

我想在每次调整 window 大小时更改特定 div 的宽度。 div 的 class 属性位于外部 css 文档中，class 名称为“.nav”。

在HTML中：<body onResize="nav_resize()">

在 JS 中：

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


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

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

我知道我做错了什么，因为在浏览器中尝试时没有任何反应。
任何帮助表示赞赏。

Answer 1

getElementsByClassName returns 节点列表。所以要么使用

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";}
}

Answer 2

要控制此类调整大小事件，请使用 @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
}

这将避免您在调整大小时出现从小到大和相反的问题。

Answer 3

您需要更改 window 调整大小事件侦听器中的宽度和列表中的导航元素。

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.
 if (w<700){ nav.style.width= w-150 ;}
}

Javascript - 如何改变 css class 的属性

Javascript - How to alter a property of a css class

css

properties

Javascript - 如何改变 css class 的 属性

Javascript - How to alter a property of a css class

javascript

css

properties

Javascript - 如何改变 css class 的属性