blocks|key|881178|text|jQuery的方式应该是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|881179|$(window).on('resize',+function()+{
+++if+($(window).width()+<=+768){
++++++$('header').addClass('hide');
++++++$('#menu-switch').removeClass('hide');
+++}
+++else+{
++++++$('#menu-switch').addClass('hide');
++++++$('header').removeClass('hide');
+++}
});|code-block|syntax|javascript|881180|但是您不应该使用这一点，因为在CSS中有一种通过所谓的媒体查询来执行的更好的方式。您展示的实用程序的解决方案如下所示：|881181|@media+screen+and+(max-width:+768px)+{
++++header+{
+++++++display:+none;
++++}
++++#menu-switch+{
+++++++display:+block;
++++}
}

@media+screen+and+(min-width:+769px)+{
++++header+{
+++++++display:+block;
++++}
++++#menu-switch+{
+++++++display:+none;
++++}
}|881182|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The jQuery way would be

<pre><code>$(window).on('resize', function() {
 if ($(window).width() &lt;= 768){
 $('header').addClass('hide');
 $('#menu-switch').removeClass('hide');
 }
 else {
 $('#menu-switch').addClass('hide');
 $('header').removeClass('hide');
 }
});
</code></pre>

but you shouldn't use this since there is a much more performant way to do this in CSS via so-called media queries. Your solution for the usecase you showed would look like this:

<pre><code>@media screen and (max-width: 768px) {
 header {
 display: none;
 }
 #menu-switch {
 display: block;
 }
}

@media screen and (min-width: 769px) {
 header {
 display: block;
 }
 #menu-switch {
 display: none;
 }
}
</code></pre>

blocks|key|1396348|text|JavaScript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1396349|window.onresize+=+function(event)+{
var+$width+=+$(window).width();
++if+($width+<=+768){
+++$('header').addClass('hide');
+++$('#menu-switch').removeClass('hide');
+};
};|code-block|syntax|javascript|1396350|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

JavaScript:

<pre><code>window.onresize = function(event) {
var $width = $(window).width();
 if ($width &lt;= 768){
 $('header').addClass('hide');
 $('#menu-switch').removeClass('hide');
 };
};
</code></pre>

blocks|key|881064|text|这可以用css来实现，因为窗口大小调整监听器对于低性能计算机的用户来说是相当沉重的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|881065|试着像这样想：|881066|@media+screen+and+(max-width:+767px)+{
+header,+#menu-switch+{
+++display:+none;
+}
}|code-block|syntax|javascript|881067|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

That can be done with css for a smoother rendering as window resize listener is quite heavy for users with low perfomance computers.

Try somethink like this:

<pre><code>@media screen and (max-width: 767px) {
 header, #menu-switch {
 display: none;
 }
}
</code></pre>

blocks|key|826759|text|jQuery(window).on('resize',+function(){+....|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|826760|以前，我们不得不使用相同的想法来修改css的大小。我们还添加了一些延迟，并在文档中触发了调整大小的事件。|unstyled|826761|setTimeout(function(){
++jQuery(window).trigger('resize');
},+200);|826762|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>jQuery(window).on('resize', function(){ ....
</code></pre>

We've had to use the same idea to fix css on resize previously. We also added some delay and trigged the resize event ourselves as well on document ready just to be sure.

<pre><code>setTimeout(function(){
 jQuery(window).trigger('resize');
}, 200);
</code></pre>

blocks|key|1396374|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1396375|​|1396376|$(window).bind('load+resize',+function(){
+var+$width+=+$(window).width();
++if+($width+<=+768){
+++$('header').addClass('hide');
+++$('#menu-switch').removeClass('hide');
+};
});|code-block|syntax|javascript|1396377|1396378|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

try:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).bind('load resize', function(){
 var $width = $(window).width();
 if ($width &lt;= 768){
 $('header').addClass('hide');
 $('#menu-switch').removeClass('hide');
 };
});</code></pre>
</div>
</div>

blocks|key|826827|text|你应该使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|826828|jQuery(window).resize(function(){
++++var+$width+=+$(window).width();
++++if+($width+<=+768){
++++++++$('header').addClass('hide');
++++++++$('#menu-switch').removeClass('hide');
++++};
});|code-block|syntax|javascript|826829|这样可以捕获浏览器调整大小的事件，每次用户调整浏览器大小时，变量宽度都会得到一个新的值。|826830|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You should use:

<pre><code>jQuery(window).resize(function(){
 var $width = $(window).width();
 if ($width &lt;= 768){
 $('header').addClass('hide');
 $('#menu-switch').removeClass('hide');
 };
});
</code></pre>

This way it can catch the events of browser resizing and every time the user resizes its browser the variable width will get a new value.

blocks|key|1394933|text|您需要检查页面何时加载，何时调整大小或滚动：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1394934|var+changeMe+=+function(){
+++var+$width+=+$(document).width();
+++++if+($width+<=+768){
++++++$('header').addClass('hide');
++++++$('#menu-switch').removeClass('hide');
++++};
};
/*+On+ready+*/
$(document).ready(function(){changeMe();});
/*+On+resize+*/
$(window).resize(function(){changeMe();});
/*+On+scroll+*/
$(document).scroll(function(){changeMe();});|code-block|syntax|javascript|1394935|这是百分之百的工作。|1394936|但是您可以使用CSS3来解决这个问题：|1394937|@media+screen+and+(max-width:+768px)+{
++++header+{
+++++++display:+none;
++++}
++++#menu-switch+{
+++++++display:+block;
++++}
}|1394938|只需在您的主样式之后包含CSS开关，并且只更改您需要的内容。|1394939|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You need to check when page is load and when is resize or scroll:

<pre><code>var changeMe = function(){
 var $width = $(document).width();
 if ($width &lt;= 768){
 $('header').addClass('hide');
 $('#menu-switch').removeClass('hide');
 };
};
/* On ready */
$(document).ready(function(){changeMe();});
/* On resize */
$(window).resize(function(){changeMe();});
/* On scroll */
$(document).scroll(function(){changeMe();});
</code></pre>

This work 100%.

But you can use CSS3 for this problem:

<pre><code>@media screen and (max-width: 768px) {
 header {
 display: none;
 }
 #menu-switch {
 display: block;
 }
}
</code></pre>

Just include CSS switcers AFTER your main style and change ONLY what you need.

I want to add and remove css class when the window's width is smaller than 768px.
I used javascript to do this :

<pre><code>$(window).ready(function() {
 var $width = $(window).width();
 if ($width &lt;= 768){
 $('header').addClass('hide');
 $('#menu-switch').removeClass('hide');
 };
});
</code></pre>

The problem is that I've to refresh the page so that it works. Is there a way to add and remove class without need to refresh the page ?

Change css class with js

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

当窗口的宽度小于768 is时，我想添加和删除css类。我使用javascript来完成这个任务：$(window).ready(function() { var $width = $(window).width(); if ($width <= 768){ $('header').addClass('hide'); $('#menu-switch').removeClass('hide

问用js更改css类
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用js更改css类EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用js更改css类
EN