JavaScript和CSS是前端開發中兩個非常重要的技術。其中，CSS的display屬性可以控制HTML元素是顯示還是隱藏，而JavaScript可以結合CSS中的display屬性來實現更多復雜的效果。

例如，當我們需要在頁面中實現一個下拉菜單時，可以利用JavaScript和CSS實現。具體思路是：當鼠標移動到菜單項上時，利用JavaScript動態改變該菜單項所對應的下拉內容的display屬性，從而實現顯示菜單下拉的效果。當鼠標移開該菜單項時，我們則可以在JavaScript中將下拉內容的display屬性重新設置為none，從而實現菜單下拉框的隱藏。下面是一段相關的JavaScript代碼以及對應的CSS樣式：

var dropdownMenu = document.getElementsByClassName("dropdown-menu")[0];
function showMenu(){
dropdownMenu.style.display = "block";
}
function hideMenu(){
dropdownMenu.style.display = "none";
}

.dropdown-menu {
display: none;
}

上述代碼中，我們使用了getElementByClassName方法獲取了菜單下拉框的DOM元素，然后在showMenu和hideMenu這兩個函數中，分別將該元素的display屬性分別設置為block和none，從而實現菜單下拉框的顯示和隱藏效果。

還有另外一種常見的應用場景，就是利用JavaScript和CSS實現一個模態框彈出窗口。此時，我們同樣需要使用CSS的display屬性來控制模態框元素的顯示和隱藏，同時，在JavaScript中，我們需要監聽一些事件，如點擊按鈕或者按下ESC鍵，從而觸發相關的函數，動態改變模態框元素的display屬性，實現顯示和隱藏效果。

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

上述代碼中，我們使用了getElementById方法獲取了模態框的DOM元素，然后在按鈕的onclick事件和關閉按鈕的onclick事件中，分別將該元素的display屬性分別設置為block和none，從而實現模態框的顯示和隱藏效果。同時，在window.onclick事件中，我們還監聽了鼠標點擊事件，判斷用戶是否點擊在了模態框以外的地方，如果是的話，我們也將該元素的display屬性設置為none，從而關閉模態框彈出窗口。

綜上所述，JavaScript結合CSS中的display屬性可以實現一些非常酷炫的前端效果。掌握它們的用法，可以讓我們更加靈活地開發前端頁面，提高我們的工作效率。