Question

这就是我想要做的事情：

我希望每次调整窗口大小时都要更改特定div的宽度。 div的类属性位于外部css文档中，类名为＆＃39; .nav＆＃39;。

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

在JS中：

＆＃13;

var w= window.innerWidth, h= window.innerHeight;
var nav= document.getElementsByClassName('nav');


function nav_resize(){
	if (w<700){ nav.style.width= w-150;}
}

＆＃13;

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

＆＃13;

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

Answer 1

getElementsByClassName返回nodelist。所以要么使用

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

您需要在resize事件侦听器和nav元素列表中更改窗口宽度。

＆＃13;

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

＆＃13;

Javascript - 如何更改css类的属性

3 个答案: