英文:
Javascript and media query "conflict"?
问题
以下是翻译后的内容：
<!-- 开始代码片段: js 隐藏: false 控制台: true babel: false -->
<!-- 语言: lang-js -->
function showOrHideMenu(menuId) {
// alert(menuId);
var menu = document.getElementById(menuId);
// alert(menu);
var isVisible = menu.style.visibility;
// alert(isVisible);
if ((isVisible === 'hidden') || (isVisible === '')) {
// alert(menu1);
menu.style.visibility = 'visible';
menu.style.width = '75vw';
// alert("passe 1 bis");
} else {
// alert("passe 2");
menu.style.visibility = 'hidden';
// alert("passe 2 bis");
}
}
<!-- 语言: lang-css -->
@media (min-width: 800px) {
.css_menu_1 {
visibility: visible;
font-size: 1.3rem;
background-color: goldenrod;
}
}
<!-- 语言: lang-html -->
<img src="../images/hamburger_menu_icon.png" alt="显示或隐藏菜单1" class="css_btn_menu_1" id="btn_menu_1" onclick="showOrHideMenu('menu_1');">
<!-- 结束代码片段 -->
当我在宽度小于800px的屏幕上时，我可以点击图像。
`showOrHideMenu()` 函数被执行，确实根据指定的方式更改了id为 `menu_1` 的HTML元素的可见性和宽度。
我再次点击图像，HTML元素如预期地隐藏。
现在，如果我增加视口的大小，HTML元素应该再次可见。
但实际上，我得到了一个空白空间。
执行Javascript函数是否与媒体查询的“执行”发生冲突？
我可以做些什么来修复这个问题？
-- 编辑 1 --
添加以下CSS：
```css
.css_menu_1.active
{
visibility : visible;
width: 75vw;
}
并用以下Javascript替换：
<script type="text/javascript">
var btnMenu1 = document.getElementById('btn_menu_1');
var menu1 = document.getElementById('menu_1');
btnMenu1.addEventListener('click', () =>
{
menu1.classList.toggle('active');
});
</script>
解决了我的问题。
<details>
<summary>英文:</summary>
Below is the code, the problem description and questions come right after.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function showOrHideMenu(menuId) {
// alert(menuId);
var menu = document.getElementById(menuId);
// alert(menu);
var isVisible = menu.style.visibility;
// alert(isVisible);
if ((isVisible === 'hidden') || (isVisible === '')) {
// alert(menu1);
menu.style.visibility = 'visible';
menu.style.width = '75vw';
// alert("passe 1 bis");
} else {
// alert("passe 2");
menu.style.visibility = 'hidden';
// alert("passe 2 bis");
}
}
<!-- language: lang-css -->
@media (min-width: 800px) {
.css_menu_1 {
visibility: visible;
font-size: 1.3rem;
background-color: goldenrod;
}
}
<!-- language: lang-html -->
<img src="../images/hamburger_menu_icon.png" alt="Display or hide menu 1" class="css_btn_menu_1" id="btn_menu_1" onclick="showOrHideMenu('menu_1');">
<!-- end snippet -->
When I am on a screen which width is less than 800px, I can click on the image.
The `showOrHideMenu()` function gets executed and indeed the visibility and width of the HTML element which id is `menu_1` are changed as specified.
I click a second time on the image and the HTML element gets hidden as expected.
Now, if I increase the size of the viewport, the HTML element is supposed to be visible again.
Instead of it, I get a blank space.
Does the execution of the Javascript function conflict with the "execution" of the media query?
What can I do to fix that?
-- EDIT 1 --
Adding that CSS:
.css_menu_1.active
{
visibility : visible;
width: 75vw;
}
And replacing the Javascript by this one:
<script type="text/javascript">
var btnMenu1 = document.getElementById('btn_menu_1');
var menu1 = document.getElementById('menu_1');
btnMenu1.addEventListener('click', () =>
{
menu1.classList.toggle('active');
});
</script>
solves my problem.
</details>
# 答案1
**得分**: 1
当您使用JavaScript更改样式时，它会向元素添加内联样式。内联样式会覆盖任何样式，从而覆盖了在CSS媒体查询中定义的样式。
在这种情况下，您可以在菜单可见时完全删除内联样式。
```javascript
function showOrHideMenu(menuId) {
var menu = document.getElementById(menuId);
if (menu.style.visibility === 'hidden' || menu.style.visibility === '') {
menu.style.visibility = 'visible';
menu.style.width = '75vw';
} else {
menu.style.visibility = '';
menu.style.width = '';
}
}
或者您可以添加一个类 "active" 并相应地更改样式：
function showOrHideMenu(menuId) {
var menu = document.getElementById(menuId);
if (menu.style.visibility === 'hidden' || menu.style.visibility === '') {
menu.classList.add('active');
} else {
menu.classList.remove('active');
}
}
在CSS中，您还需要进行以下设置：
.css_menu_1 {
visibility: hidden;
width: 0;
}
.css_menu_1.active {
visibility : visible;
width: 75vw;
}
英文:
When you are using javascript to change styles, it adds inline style to the element. The inline styles override anything and this leads to overriding your styles defined in CSS media queries.
In this case, you can remove entirely the inline styles when menu is visible.
function showOrHideMenu(menuId) {
var menu = document.getElementById(menuId);
if (menu.style.visibility === 'hidden' || menu.style.visibility === '') {
menu.style.visibility = 'visible';
menu.style.width = '75vw';
} else {
menu.style.visibility = '';
menu.style.width = '';
}
}
Or you can add a class " active " and change the styles accordingly :
function showOrHideMenu(menuId) {
var menu = document.getElementById(menuId);
if (menu.style.visibility === 'hidden' || menu.style.visibility === '') {
menu.classList.add('active');
} else {
menu.classList.remove('active');
}
}
In css you will also have to do the following :
.css_menu_1 {
visibility: hidden;
width: 0;
}
.css_menu_1.active {
visibility : visible;
width: 75vw;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论