为什么我无法console.log（）style.display

Question

我在尝试console.log（）菜单内容的显示值时遇到问题，但是即使我选择正确也不能，请帮我检查一下，谢谢

clickMenuReponsive.onclick = function(){
    let menuContent = document.querySelector('nav .menu .menu-content');
    console.log(menuContent);
    console.log(menuContent.style.display);
}

nav .menu .menu-content {display: none; margin-top: 10px}

Answer 1

要获取元素的 非内联 样式，可以使用window.getComputedStyle()：

演示：

function fixedDelimeter(str){

return str.split('-').reverse().join('-')

}

console.log('With Fixed Delimeter: ',fixedDelimeter('subject-verb-object'))


function dynamicDelimeter(str,delimeter){

return str.split(delimeter).reverse().join(delimeter)

}

console.log('With Dynamic Delimeter: ',dynamicDelimeter('subject*verb*object', '*'))

let menuContent = document.querySelector('.menu-content');
console.log(menuContent);
console.log(window.getComputedStyle(menuContent).display);

.menu-content {display: none; margin-top: 10px}