添加/刪除特定的div類基於屏幕大小

我需要添加類。全頁當屏幕尺寸爲> = 769px並刪除同一類時，屏幕尺寸爲< = 768 。我需要的類的DIV被應用到具有的ID #here我已經嘗試了不少東西，這是我離開......添加/刪除特定的div類基於屏幕大小

<script> 

    var windowSize = window.innerWidth; 

    if (windowSize >= 769) { 
     console.log('Greater than 768'); 
     document.getElementById('here').addClass = 'full-page';} 

    else (windowSize <= 768) { 
     console.log('Less than 768'); 
     document.getElementById('here').removeClass = 'full-page';} 

</script>

任何有小費？提前致謝！

來源

2017-01-05 Furlong

這裏您最好[使用媒體查詢]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries） –

P.S.控制檯日誌在開發工具中以適當的屏幕尺寸顯示，腳本不起作用。 – Furlong

如果您仍然想使用此代替媒體查詢，請查找[className]（https://developer.mozilla.org/en-US/docs/Web/API/Element/className）。你的'addClass = ...'沒有意義。 –

您可以使用window#matchMedia來檢測寬度變化，並查看它是否符合某個標準。使用classList添加和刪除類。

您可以看到一個示例here。通過拖動邊框來改變右下矩形的寬度。

代碼：

var classList = document.getElementById('here').classList; 

var minWidth769 = window.matchMedia("(min-width: 769px)"); 

function match() { 
    minWidth769.matches ? classList.add('full-page') : classList.remove('full-page'); 
} 

minWidth769.addListener(match); 

match();

來源

2017-01-05 20:52:33

這完美的工作！非常感謝，我很感激！ – Furlong

不客氣:) –

沒有方法添加|刪除類在JavaScript中，如果你想改變類的元素，你可以使用

document.getElementById('here').className = 'full-page'

document.getElementById('here').setAttribute('class', 'full-page')

來源

2017-01-05 20:35:32

其實有classList，它只是不適用於舊的IE –

我認爲你需要使用jQuery，如果你想使用 'addClass'，鏈接後，jQuery的文件，嘗試

$("#here").addClass("full-page");

和

$("#here").removeClass ("full-page");

來源

2017-01-05 20:58:06

添加/刪除特定的div類基於屏幕大小

回答

相關問題