整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在现代Web开发中，JavaScript（JS）扮演着至关重要的角色，它使网页具备了动态交互的能力。通过JS，开发者能够实时地改变页面的布局、样式以及内容，极大地提升了用户体验。本文将聚焦于如何使用JS来修改文档对象模型（DOM）中的元素样式和属性，通过具体的示例和深入的分析，让你全面掌握这一技能。
DOM是一套标准，用于表示和修改HTML和XML文档的结构。JavaScript提供了多种方法来访问和修改DOM中的元素。通过JS，我们可以改变元素的CSS样式和HTML属性，从而实现页面的动态更新。
// 改变元素的样式
document.getElementById('myElement').style.color = 'red';
// 改变元素的HTML属性
document.getElementById('myLink').setAttribute('href', 'https://www.example.com');
当JS修改DOM元素的样式或属性时，实际上是在改变浏览器对这些元素的渲染方式。JS通过访问DOM API，如style属性和setAttribute方法，来实现这一过程。
假设我们有一个登录表单，当用户输入信息时，我们希望实时显示输入状态，如输入框边框颜色的变化。
const inputField = document.getElementById('username');
inputField.addEventListener('input', function() {
if (this.value.trim().length > 0) {
this.style.borderColor = 'green';
} else {
this.style.borderColor = 'red';
}
});
频繁的DOM操作可能导致页面性能下降，尤其是当涉及到大量元素时。
const element = document.getElementById('myElement');
element.classList.add('highlight'); // 利用CSS类
掌握通过JS操纵DOM元素的样式和属性是前端开发的基本功之一。它不仅增强了页面的互动性和响应性，也是构建现代Web应用的基础。随着Web技术的不断进步，DOM操作的效率和便捷性也在不断提升，学习和掌握这一技能将为你的前端开发之路打开更多可能性。
希望本文能够帮助你深入理解并熟练运用JS来操控DOM元素的样式和属性，无论是在日常的编码实践中，还是在解决复杂的问题场景下，都能得心应手。如果你有任何疑问或想要分享的经验，欢迎在评论区留言。让我们一起探索前端世界的无限可能！
黑模式是一种设计趋势，由暗色（dark）和高亮（light）两种视觉模式组成。暗黑模式之所以成为设计或者 Web 端的热点，主要归功于 Apple 公司，该公司在 iOS 和 macOS 操作系统中加入了暗黑模式，即系统级别的两种皮肤，用户可以通过系统切换，让整个应用的颜色可以轻松切换。暗黑模式流行之后，Windows 和 谷歌也加入了暗黑模式，选多流行的网站和应用程序中都提供了暗黑模式选型。
本文将从以下几个方面深入探讨网页暗黑模式的实现：
如果本文对您有帮助，欢迎在关注、点赞、分享给更多需要的人。
暗黑模式在操作系统被支持之后，在APP、网页、浏览器中得到广泛支持，尤其是现在网页端的框架已实现的对暗黑模式的功能支持。
以 macOS 为例，在操作系统中 Settings > 通用 面板可以切换 light 和 dark 模式。
在 Chrome 开发工具中 DevTools > Settings > Preferences > Theme 可以设置 light 和 dark 模式。
1）Bootstrap
Bootstrap 在 v5.3.0 版本支持了 light 和 dark 两种颜色模式，开发者可以通过 data-bs-theme 属性在 html 元素上全局切换，也可以在特定的组件和元素上切换。
更多：https://getbootstrap.com/docs/5.3/customize/color-modes/
2）Tailwind CSS
Tailwind CSS 中暗黑模式可以通过 media 和 class 两种方式进行设置，media 选项由操作系统设置，只会考虑浏览器的配色方案偏好，而 class 选项将查找 .dark 应用于 html 标签的类，通过这种方法，开发者可以手动进行偏好设置。
更多：https://tailwindcss.com/docs/dark-mode
暗黑模式最传统的实现方案就是实现两套颜色主题，包含类名切换和按条件加载样式表两种不同方案。
1）类名切换：一个样式文件 + 两套颜色类选择器：
通过一个样式文件和两套颜色类选择器，通过 Javascript 实现类名 light 或者 dark 切换。
<style>
.container {
.light {
color: #ccc;
}
.dark {
color: #333;
}
}
</style>
<div class="container light"></div>
<div class="container dark"></div>
2）样式表按需：两个样式文件 + 一套颜色类选择器：
<%if(theme === 'dark') {%>
<link href="https://xxx.com/dark.css">
<%>} else {%>
<link href="https://xxx.com/light.css">
<%}%>
<div class="container"></div>
现代方案采用现代 CSS 属性：CSS变量、@container、:where()、:has() 等组合来实现。
1）核心样式：
body {
display: grid;
place-items: center;
--background-color: #fff;
--text-color: #222;
background-color: var(--background-color);
color: var(--text-color);
color-scheme: light dark;
margin-top: 20px;
}
:where(html) {
--darkmode: 0;
container-name: root;
container-type: normal;
}
@container root style(--darkmode: 1) {
body {
--background-color: hsl(228, 5%, 15%);
--text-color: hsl(228, 5%, 80%);
}
}
@media (prefers-color-scheme: dark) {
html {
--darkmode: 1;
}
}
@media (prefers-color-scheme: light) {
html {
--darkmode: 0;
}
}
html:has(#color-scheme-light:checked) {
--darkmode: 0;
}
html:has(#color-scheme-dark:checked) {
--darkmode: 1;
}
2）部分样式解析：
html:has(#color-scheme-dark:checked)：html 子元素含有 id 属性值为 color-scheme-dark 且 checked 属性值为 true 的元素。示例中使用的是 input[type=radio] 元素。
@media (prefers-color-scheme: light)：prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。本示例在切换系统暗黑模式时，网页的颜色也会跟着变化。
:where()：CSS 伪类函数，接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。
:has()：CSS 伪类函数，通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。
@container root style(--darkmode: 1)： 是一种条件组规则，可将样式应用于包含上下文。样式声明由条件筛选，如果条件为真，则应用于容器。当容器改变大小时，将对条件进行评估。
color-scheme: light dark：color-scheme 属性允许元素指明它可以使用哪些配色方案。当用户选择其中一种配色方案时，操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。
1）light-dark() 介绍
好消息！，CSS Color Module Level 5 Specification 新增加了一个函数 light-dark()。该函数接受两个颜色值作为参数。根据您正在使用的颜色方案，它将输出第一个或第二个颜色参数。
light-dark(<color>, <color>);
如规范中描述：
This function computes to the computed value of the first color, if the used color scheme is light or unknown, or to the computed value of the second color, if the used color scheme is dark.
使用的配色方案不仅基于用户的 Light/Dark 模式设置，还基于 color-scheme 属性的值。这与系统颜色的计算方法类似。
:root {
color-scheme: light dark;
}
/* light 对应 #333，dark 对应 #ccc */
:root {
--text-color: light-dark(#333, #ccc);
}
2）light-dark() 兼容性
当前，现代浏览器对 light-dark() 的支持还不太好，仅有 firefox 浏览器的最新版本支持。
2）light-dark() 支持判断
可以通过 @supports 和 CSS 伪元素来判断。
#support::after {
content: "❌ Your browser does not support light-dark()";
background-color: #ff00002b;
display: block;
margin: 1em 0;
padding: 1em;
border: 1px solid #ccc;
}
@supports(color: light-dark(#fff, #000)) {
#support::after {
content: "✅ Your browser supports light-dark()";
background-color: #00ff002b;
}
}
除了主要的网页颜色主题切换外，还有一些其他应用场景。
1）暗黑模式图像
2）暗黑模式阴影
3）暗黑模式调色板
4）暗黑模式段落
网站是否启用暗黑模式，取决于不同团队、不同用户群体、不同设计风格，下面是一些推荐你开启的理由：
许多方法可以将HTML元素与CSS对齐，但是一起使用或单独使用它们并不是那么容易。开发人员所面临的困难之一就是试图将元素集中在页面中间。
因此，在本文中，我将展示一些最常用的方法，即通过使用不同的CSS属性在水平和垂直方向上居中图像。
让我们开始使用3个不同的CSS属性将图像水平居中。
使图像水平居中的第一种方法是使用text-align属性。但是，仅当图像位于块级容器（例如<div>）内时，此方法才有效：
使图像居中的另一种方法是使用margin：auto属性（用于左边距和右边距）。但是，单独使用margin：Auto将不适用于图像。如果需要使用margin：auto，则还必须使用2个其他属性。
margin-auto属性对内联级别的元素没有任何影响。由于<img>标签是一个内联元素，因此我们需要先将其转换为块级元素：
其次，我们还需要定义宽度。因此，左右边缘可以占用其余的空白空间并自动对齐，可以这样解决问题（除非我们给出100％的宽度）：
将图像水平居中的第三种方法是使用display：flex。同样，我们对容器使用text-align属性，它也会使用display：flex。但是，仅使用display：flex是不够的。容器还必须具有一个称为justify-content的附加属性。
justify-content属性与display：flex一起使用，我们可以使用它水平放置图像的中心。最后，图像的宽度必须小于容器的宽度，否则，它会占用100％的空间，然后我们就无法对其进行集中化。
1、Display: Flex
对于垂直对齐，使用display：flex确实很有帮助。考虑到我们的容器的高度为800px，但图像的高度仅为500px：
现在，在这种情况下，向容器中添加一行代码（align-items：center）就可以了：
如果将align-items属性与display：flex一起使用，就会将元素垂直放置。
2、位置：绝对和变换属性
垂直对齐的另一种方法是一起使用position和transform属性。这个有点复杂，所以让我们一步一步地做。
步骤1：定义绝对位置
首先，我们将图像的定位行为从静态更改为绝对：
同样，它应该位于相对放置的容器内，因此我们添加一个位置：相对于其容器的div。
步骤2：定义顶部和左侧属性
其次，我们定义图像的顶部和左侧属性，并设置为50％。这会将图像的起点（左上角）移到容器的中心：
步骤3：定义变换属性
在第二步的时候已经将图像的一部分移出容器。因此，我们需要将其取回内部。在图像上定义转换属性，并在其X和Y轴上添加负50％可以达到目的：
还可以使用其他方法进行水平和垂直居中，我这里只尝试了最常用的方法。希望这篇文章可以帮助你了解如何在页面中心对齐图像。
*请认真填写需求信息，我们会在24小时内与您取得联系。
