HTML片段如何获取相应的CSS样式啊?

带头大哥
  • 1
新手上路,请多包涵

对于完整的HTML文件和CSS样式,一部分的代码片段如何获取对应的CSS啊?(人工找太难了。)比如下面的,其中HTML只截取了<header>...</header>部分,下面是对应的CSS。
【HTML代码片段】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <header>
        <nav class="navbar">
            <img src="./images/logo.png" alt="" class="logo">
            <ul class="nav-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">PortfolioBlog</a></li>
                <li><a class="ctn" href="#">Contact Us</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>

【对应的CSS样式】

header {
  background-size: 100%;
  min-height: 100vh;
  position: relative;
}
.navbar {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  padding: 10px 50px;
  align-items: center;
}
.navbar ul {
  flex: 1;
  text-align: right;
}
.navbar ul li {
  display: inline-block;
  margin: 0 25px;
  list-style: none;
}
.logo {
  width: 180px;
}
.ctn {
  padding: 10px 20px;
  background: var(--gradient-3);
  border-radius: 50px;
}
.ctn:hover {
  background: linear-gradient(
    to bottom right,
    rgb(255, 111, 92),
    rgb(255, 207, 145)
  );
}
回复
阅读 787
1 个回答

两种方式:

1.用getComputedStyle
但你的需求比较特殊,还需要获取所有子节点的样式,可能不满足。

2.用document.styleSheets
这个接口可以获取到所有样式表,并且每个样式表有cssRules属性,其中还有selectorText选择器的属性,可以比较灵活的获取一些样式。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏