javascript - Javascript 显示我使用 css 设置样式的文档对象的空样式属性
问题描述
我有一个快速的问题。如果有人能帮我解决这个问题,我会很高兴。
我正在尝试创建一个导航栏,然后我有以下 CSS 代码,
header .navbar .container .sliding-menu {
transform: translateX(100%);
}
在上面的代码中,.sliding-menu
给包含内容的 div 的类。
但是,当我使用 Javascript 并键入以下代码时,
const slidingMenu = document.querySelector('header .navbar .container .sliding-menu');
console.log(slidingMenu.style.transform);
控制台向我返回一个空字符串。有谁知道原因?谢谢。
附加信息:
如果有人想要参考,我将在下面提供整个代码。
HTML
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Computia | Computers & Related Accessories | Best Price in Sri Lanka</title>
</head>
<body>
<header>
<nav class="navbar">
<div class="container">
<h1 class="logo">Computia</h1>
<div class="sliding-menu">
<h2>Navigate</h2>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Shopping Bag</a></li>
</ul>
<h2>Account</h2>
<ul>
<li><a href="#">Sign In / Register</a></li>
<li><a href="#">Wishlist</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Gift Certificates</a></li>
<select name="currency" id="currency">
<option value="LKR">LKR</option>
<option value="USD">USD</option>
<option value="AUD">GBP</option>
</select>
</ul>
</div>
<div class="hamburger">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</div>
</nav>
</header>
<script src="app.js"></script>
</body>
</html>
CSS
/* -------------------------- */
/* --------CSS Reset-------- */
/* ------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ----------------------------- */
/* --------Main Styling--------- */
/* ---------------------------- */
:root {
--primary-color: #118ab2;
}
html, body {
font-family: 'Poppins', sans-serif;
font-size: 10px;
overflow-x: hidden;
}
h1 {
font-family: 'Roboto', sans-serif;
letter-spacing: 3px;
font-size: 2rem;
border-bottom: 1px solid black;
display: block;
padding-bottom: 0.2em;
}
a, p {
font-size: 1.5rem;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style: none;
}
/* ------------------------------------ */
/* --------Reusable Components--------- */
/* ------------------------------------ */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
/* ------------------------ */
/* ---------Navbar-------- */
/* ------------------------*/
header .navbar .container {
position: relative;
}
header .navbar .container h1,
header .navbar .container .sliding-menu
{
background-color: var(--primary-color);
}
header .navbar .container .hamburger {
background-color: chartreuse;
display: inline-block;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
}
header .navbar .container .sliding-menu {
transform: translateX(100%);
}
header .navbar .container .hamburger div {
height: 3px;
margin: 4.5px;
width: 30px;
background-color: rgb(201, 190, 190);
border-radius: 100px;
}
/* Navbar-classLists */
/* .hamburger-toggled .line-1 {
transform: rotate(45deg);
}
.hamburger-toggled .line-2 {
opacity: 0
}
.hamburger-toggled .line-3 {
transform: rotate(-45deg);
} */
Javascript
const slidingMenu = document.querySelector('header .navbar .container .sliding-menu');
console.log(slidingMenu.style.transform);
我尝试了大约三个小时,但找不到问题。如果有人可以,请提供帮助。非常感谢。
解决方案
这是因为element.style
返回元素的内联 CSS 样式,而不是基于 CSS 样式表的计算样式。
要获得计算的样式,请使用window.getComputedStyle(element)
.
更多信息在这里:
推荐阅读
- apache - 如果目录显示为可写,为什么“该目录不可被 Web 进程写入”?
- asp.net-mvc - Kentico 12 PageBuilder 缺少参考
- matrix - 使用 Julia 将未格式化的 FORTRAN 文件读入多维数组
- reactjs - 单击卡片时如何路由到具有特定卡片详细信息的页面?
- javascript - 根据范围返回数组中的对象
- c++ - 为什么必须在线程销毁之前调用 join() 或 detach() ?
- c# - 未找到命令 dotnet ef
- arrays - 在二进制数组中查找集群组
- python - 尝试使用烧瓶和 apache 运行网站时出现 404 not found 错误
- r - 从数据框中创建一个列表:A 列是变量,B 列与 C 列中的值相关联