如果您想了解为什么通过javascript访问时div的初始状态没有值？和javascript访问dom的知识，那么本篇文章将是您的不二之选。我们将深入剖析为什么通过javascript访问时div的
如果您想了解为什么通过 javascript 访问时 div 的初始状态没有值？和javascript访问dom的知识，那么本篇文章将是您的不二之选。我们将深入剖析为什么通过 javascript 访问时 div 的初始状态没有值？的各个方面，并为您解答javascript访问dom的疑在这篇文章中，我们将为您介绍为什么通过 javascript 访问时 div 的初始状态没有值？的相关知识，同时也会详细的解释javascript访问dom的运用方法，并给出实际的案例分析，希望能帮助到您！
本文目录一览：- 为什么通过 javascript 访问时 div 的初始状态没有值？（javascript访问dom）
- javascript div 遮罩层封锁整个页面_javascript技巧
- javascript – DC.js图表中的初始范围选择
- javascript – 为什么LiveScript对未定义的值使用“void 8”？
- javascript – 为什么浏览器会替换通过css分配的宽度值？
为什么通过 javascript 访问时 div 的初始状态没有值？（javascript访问dom）
如何解决为什么通过 javascript 访问时 div 的初始状态没有值？？
<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggletoolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(dis.style.display)
}
</script>
</head>
<body>
<div>
<buttononclick="toggletoolNav()"><i></i></button>
</div>
</body>
</html>当按下左上角按钮时，警告弹出框不打印任何内容，表明 navbar 没有显示。但 navbar 是一个 div 元素，在 CSS 代码中显式设置了 display = block。
解决方法
您没有返回值，因为 style 属性在此实例中不包含任何值。例如，如果我们将 display: block 作为 style 属性（如 ）移动到元素，那么它会像您期望的那样返回值。请参阅提供的示例，但行为是预期的。
希望这会有所帮助，加油！
PS - 默认情况下，div 是块元素，无需在 css 中定义它，除非您出于任何原因覆盖默认值。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0];
console.log(dis);
alert(dis.style.display);
}
</script>
</head>
<body>
<div>
<buttononclick="toggleToolNav()"><i></i></button>
</div>
</body>
</html>看起来您想要获取 CSS 计算样式。您可以使用 getComputedStyle 返回一个对象，该对象包含该元素的所有 CSS 属性的值。
getComputedStyle(dis,"display").display
将返回在您的元素 css 中设置的显示规则。正如 Chris W 在之前的回答中解释的那样，如果您使用 el.style.display，它会寻找用于显示的内联样式规则。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(getComputedStyle(dis,"display").display)
}
</script>
</head>
<body>
<div>
<buttononclick="toggleToolNav()"><i></i></button>
</div>
</body>
</html>
