如何使用javascript更改媒體查詢中的元素

如何使用javascript更改媒體查詢中定義的元素？如何使用javascript更改媒體查詢中的元素

我的目的是讓一個隱藏的元素與javascript可見，而這個元素應該只能在屏幕尺寸小於1000px的情況下可見。因此，一旦元素在屏幕小於1000px時變得可見（點擊鼠標），當用戶將窗口大小調整爲大於1000px時，該元素應該隱藏。

這是代碼，對代碼本身的目的進行了一些解釋。

<!DOCTYPE html> 
<html lang="en"> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <style media="screen" type="text/css"> 
    #mobile-only, #mobile-only-after-click { display: none; } 
    @media screen and (max-width: 1000px) { 
     #mobile-only { display: block;} 
    } 
    </style> 
    <script> 
    function show() { 
     document.getElementById("mobile-only-after-click").style.display = "block"; 
    } 
    </script> 
</head> 
<body> 
    <div>In desktop view this is the only visible div</div> 
    <div id="mobile-only">In mobile view this div is extra. <a href="#" onclick="show(); return false;">Click</a> to see a third div</div> 
    <div id="mobile-only-after-click">This third div should only be visible for mobile users. It should be hidden for desktop users after resizing the window to a larger size, after it was shown in a small screen upon a click.</div> 
</body> 
</html>

我嘗試添加以下內容，但它不起作用。第三個div在顯示後並沒有隱藏，並且在該事件之後使窗口大於1000px。

@media screen and (min-width: 1000px) { 
    #mobile-only-after-click { display: none; } 
}

來源

2017-07-15 Michiel

這就是當你改變內嵌樣式使用JavaScript，它們將覆蓋樣式會發生什麼。 – adeneo

感謝您的迴應，但是通過此解決方案，僅限移動設備的div始終處於隱藏狀態，即使在小屏幕上它們應該可見。 – Michiel

是什麼？ https://codepen.io/mcoker/pen/pwBvre –

這裏有3個可能的解決方案。

解決方案＃1

我們可以用一個簡單的window.onresize事件觀察覆蓋媒體查詢，並保持所示的元素可見，或當屏幕越過1000像素隱藏它。

要測試此操作，您需要點擊展開代碼段按鈕以全屏查看代碼段，以便激活媒體查詢。

function show() { 
 
    document.getElementById("mobile-only-after-click").style.setProperty('display', 'block', 'important'); 
 

 
    window.onresize = function() { 
 
    if (window.innerWidth >= 1000) { 
 
    document.getElementById("mobile-only-after-click").style.display = 'none'; 
 
    } else { 
 
    document.getElementById("mobile-only-after-click").style.display = 
 
'block'; 
 
    } 
 
} 
 
}

#mobile-only, 
 
#mobile-only-after-click { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    #mobile-only { 
 
    display: block; 
 
    } 
 
}

<div>In desktop view this is the only visible div</div> 
 
<div id="mobile-only">In mobile view this div is extra. <a href="#" onclick="show(); return false;">Click</a> to see a third div</div> 
 
<div id="mobile-only-after-click">This third div should only be visible for mobile users. It should be hidden for desktop users after resizing the window to a larger size, after it was shown in a small screen upon a click.</div>

解決方案＃2

一個更好的解決方案可能是添加一個新類的元素，它採用了新的媒體查詢。在這個解決方案中，我們可以忘記一個事件觀察者，並且簡單地向該元素添加一個新的.shown類，該元素將使用一組新的CSS規則來顯示/隱藏該元素。

function show() { 
 
    document.getElementById("mobile-only-after-click").classList.add('shown'); 
 
}

#mobile-only, 
 
#mobile-only-after-click { 
 
    display: none; 
 
} 
 

 
#mobile-only-after-click.shown { 
 
    display: block; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    #mobile-only { 
 
    display: block; 
 
    } 
 
} 
 

 
@media screen and (min-width: 1000px) { 
 
    #mobile-only-after-click.shown { 
 
    display: none; 
 
    } 
 
}

<div>In desktop view this is the only visible div</div> 
 
<div id="mobile-only">In mobile view this div is extra. <a href="#" onclick="show(); return false;">Click</a> to see a third div</div> 
 
<div id="mobile-only-after-click">This third div should only be visible for mobile users. It should be hidden for desktop users after resizing the window to a larger size, after it was shown in a small screen upon a click.</div>

解決方案＃3

最好的解決辦法 - 如果它是可以改變HTML可以移動#mobile-only元素中的#mobile-only-after-click元素。這對你現有的JS/CSS沒有任何改變。

function show() { 
 
    document.getElementById("mobile-only-after-click").style.setProperty('display', 'block', 'important'); 
 

 
}

#mobile-only, 
 
#mobile-only-after-click { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    #mobile-only { 
 
    display: block; 
 
    } 
 
}

<div>In desktop view this is the only visible div</div> 
 
<div id="mobile-only">In mobile view this div is extra. <a href="#" onclick="show(); return false;">Click</a> to see a third div 
 
    <div id="mobile-only-after-click">This third div should only be visible for mobile users. It should be hidden for desktop users after resizing the window to a larger size, after it was shown in a small screen upon a click.</div> 
 
</div>

來源

2017-07-15 21:33:39

Thanx Brett！很有幫助。 – Michiel

太棒了，很高興我們可以提供幫助。並且請將回答您問題的解決方案標記爲可接受的解決方案。 –

-1

你可以試試一些JQuery。 slideToggle（）用於顯示整個第三個div。聯機文檔中的標準示例應該可以工作。第二個和第三個div的可見性可以由css處理。或者再次使用JQuery，從來沒有使用它，但你可以用某種方法獲得瀏覽器寬度。

祝你好運，

乙

來源

2017-07-15 21:10:52 IrateB

如何使用javascript更改媒體查詢中的元素

回答

相關問題