整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
在現(xiàn)代Web開發(fā)中，JavaScript（JS）扮演著至關(guān)重要的角色，它使網(wǎng)頁具備了動態(tài)交互的能力。通過JS，開發(fā)者能夠?qū)崟r地改變頁面的布局、樣式以及內(nèi)容，極大地提升了用戶體驗。本文將聚焦于如何使用JS來修改文檔對象模型（DOM）中的元素樣式和屬性，通過具體的示例和深入的分析，讓你全面掌握這一技能。
DOM是一套標準，用于表示和修改HTML和XML文檔的結(jié)構(gòu)。JavaScript提供了多種方法來訪問和修改DOM中的元素。通過JS，我們可以改變元素的CSS樣式和HTML屬性，從而實現(xiàn)頁面的動態(tài)更新。
// 改變元素的樣式
document.getElementById('myElement').style.color = 'red';
// 改變元素的HTML屬性
document.getElementById('myLink').setAttribute('href', 'https://www.example.com');
當(dāng)JS修改DOM元素的樣式或?qū)傩詴r，實際上是在改變?yōu)g覽器對這些元素的渲染方式。JS通過訪問DOM API，如style屬性和setAttribute方法，來實現(xiàn)這一過程。
假設(shè)我們有一個登錄表單，當(dāng)用戶輸入信息時，我們希望實時顯示輸入狀態(tài)，如輸入框邊框顏色的變化。
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操作可能導(dǎo)致頁面性能下降，尤其是當(dāng)涉及到大量元素時。
const element = document.getElementById('myElement');
element.classList.add('highlight'); // 利用CSS類
掌握通過JS操縱DOM元素的樣式和屬性是前端開發(fā)的基本功之一。它不僅增強了頁面的互動性和響應(yīng)性，也是構(gòu)建現(xiàn)代Web應(yīng)用的基礎(chǔ)。隨著Web技術(shù)的不斷進步，DOM操作的效率和便捷性也在不斷提升，學(xué)習(xí)和掌握這一技能將為你的前端開發(fā)之路打開更多可能性。
希望本文能夠幫助你深入理解并熟練運用JS來操控DOM元素的樣式和屬性，無論是在日常的編碼實踐中，還是在解決復(fù)雜的問題場景下，都能得心應(yīng)手。如果你有任何疑問或想要分享的經(jīng)驗，歡迎在評論區(qū)留言。讓我們一起探索前端世界的無限可能！
黑模式是一種設(shè)計趨勢，由暗色（dark）和高亮（light）兩種視覺模式組成。暗黑模式之所以成為設(shè)計或者 Web 端的熱點，主要歸功于 Apple 公司，該公司在 iOS 和 macOS 操作系統(tǒng)中加入了暗黑模式，即系統(tǒng)級別的兩種皮膚，用戶可以通過系統(tǒng)切換，讓整個應(yīng)用的顏色可以輕松切換。暗黑模式流行之后，Windows 和 谷歌也加入了暗黑模式，選多流行的網(wǎng)站和應(yīng)用程序中都提供了暗黑模式選型。
本文將從以下幾個方面深入探討網(wǎng)頁暗黑模式的實現(xiàn)：
如果本文對您有幫助，歡迎在關(guān)注、點贊、分享給更多需要的人。
暗黑模式在操作系統(tǒng)被支持之后，在APP、網(wǎng)頁、瀏覽器中得到廣泛支持，尤其是現(xiàn)在網(wǎng)頁端的框架已實現(xiàn)的對暗黑模式的功能支持。
以 macOS 為例，在操作系統(tǒng)中 Settings > 通用 面板可以切換 light 和 dark 模式。
在 Chrome 開發(fā)工具中 DevTools > Settings > Preferences > Theme 可以設(shè)置 light 和 dark 模式。
1）Bootstrap
Bootstrap 在 v5.3.0 版本支持了 light 和 dark 兩種顏色模式，開發(fā)者可以通過 data-bs-theme 屬性在 html 元素上全局切換，也可以在特定的組件和元素上切換。
更多：https://getbootstrap.com/docs/5.3/customize/color-modes/
2）Tailwind CSS
Tailwind CSS 中暗黑模式可以通過 media 和 class 兩種方式進行設(shè)置，media 選項由操作系統(tǒng)設(shè)置，只會考慮瀏覽器的配色方案偏好，而 class 選項將查找 .dark 應(yīng)用于 html 標簽的類，通過這種方法，開發(fā)者可以手動進行偏好設(shè)置。
更多：https://tailwindcss.com/docs/dark-mode
暗黑模式最傳統(tǒng)的實現(xiàn)方案就是實現(xiàn)兩套顏色主題，包含類名切換和按條件加載樣式表兩種不同方案。
1）類名切換：一個樣式文件 + 兩套顏色類選擇器：
通過一個樣式文件和兩套顏色類選擇器，通過 Javascript 實現(xiàn)類名 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>
現(xiàn)代方案采用現(xiàn)代 CSS 屬性：CSS變量、@container、:where()、:has() 等組合來實現(xiàn)。
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 媒體特性用于檢測用戶是否有將系統(tǒng)的主題色設(shè)置為亮色或者暗色。本示例在切換系統(tǒng)暗黑模式時，網(wǎng)頁的顏色也會跟著變化。
:where()：CSS 偽類函數(shù)，接受選擇器列表作為它的參數(shù)，將會選擇所有能被該選擇器列表中任何一條規(guī)則選中的元素。
:has()：CSS 偽類函數(shù)，通過把可容錯相對選擇器列表作為參數(shù)，提供了一種針對引用元素選擇父元素或者先前的兄弟元素的方法。
@container root style(--darkmode: 1)： 是一種條件組規(guī)則，可將樣式應(yīng)用于包含上下文。樣式聲明由條件篩選，如果條件為真，則應(yīng)用于容器。當(dāng)容器改變大小時，將對條件進行評估。
color-scheme: light dark：color-scheme 屬性允許元素指明它可以使用哪些配色方案。當(dāng)用戶選擇其中一種配色方案時，操作系統(tǒng)會對用戶界面進行調(diào)整。這包括表單控件、滾動條和 CSS 系統(tǒng)顏色的使用值。
1）light-dark() 介紹
好消息！，CSS Color Module Level 5 Specification 新增加了一個函數(shù) light-dark()。該函數(shù)接受兩個顏色值作為參數(shù)。根據(jù)您正在使用的顏色方案，它將輸出第一個或第二個顏色參數(shù)。
light-dark(<color>, <color>);
如規(guī)范中描述：
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 模式設(shè)置，還基于 color-scheme 屬性的值。這與系統(tǒng)顏色的計算方法類似。
:root {
color-scheme: light dark;
}
/* light 對應(yīng) #333，dark 對應(yīng) #ccc */
:root {
--text-color: light-dark(#333, #ccc);
}
2）light-dark() 兼容性
當(dāng)前，現(xiàn)代瀏覽器對 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;
}
}
除了主要的網(wǎng)頁顏色主題切換外，還有一些其他應(yīng)用場景。
1）暗黑模式圖像
2）暗黑模式陰影
3）暗黑模式調(diào)色板
4）暗黑模式段落
網(wǎng)站是否啟用暗黑模式，取決于不同團隊、不同用戶群體、不同設(shè)計風(fēng)格，下面是一些推薦你開啟的理由：
許多方法可以將HTML元素與CSS對齊，但是一起使用或單獨使用它們并不是那么容易。開發(fā)人員所面臨的困難之一就是試圖將元素集中在頁面中間。
因此，在本文中，我將展示一些最常用的方法，即通過使用不同的CSS屬性在水平和垂直方向上居中圖像。
讓我們開始使用3個不同的CSS屬性將圖像水平居中。
使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當(dāng)圖像位于塊級容器（例如<div>）內(nèi)時，此方法才有效：
使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨使用margin：Auto將不適用于圖像。如果需要使用margin：auto，則還必須使用2個其他屬性。
margin-auto屬性對內(nèi)聯(lián)級別的元素沒有任何影響。由于<img>標簽是一個內(nèi)聯(lián)元素，因此我們需要先將其轉(zhuǎn)換為塊級元素：
其次，我們還需要定義寬度。因此，左右邊緣可以占用其余的空白空間并自動對齊，可以這樣解決問題（除非我們給出100％的寬度）：
將圖像水平居中的第三種方法是使用display：flex。同樣，我們對容器使用text-align屬性，它也會使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個稱為justify-content的附加屬性。
justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最后，圖像的寬度必須小于容器的寬度，否則，它會占用100％的空間，然后我們就無法對其進行集中化。
1、Display: Flex
對于垂直對齊，使用display：flex確實很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：
現(xiàn)在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：
如果將align-items屬性與display：flex一起使用，就會將元素垂直放置。
2、位置：絕對和變換屬性
垂直對齊的另一種方法是一起使用position和transform屬性。這個有點復(fù)雜，所以讓我們一步一步地做。
步驟1：定義絕對位置
首先，我們將圖像的定位行為從靜態(tài)更改為絕對：
同樣，它應(yīng)該位于相對放置的容器內(nèi)，因此我們添加一個位置：相對于其容器的div。
步驟2：定義頂部和左側(cè)屬性
其次，我們定義圖像的頂部和左側(cè)屬性，并設(shè)置為50％。這會將圖像的起點（左上角）移到容器的中心：
步驟3：定義變換屬性
在第二步的時候已經(jīng)將圖像的一部分移出容器。因此，我們需要將其取回內(nèi)部。在圖像上定義轉(zhuǎn)換屬性，并在其X和Y軸上添加負50％可以達到目的：
還可以使用其他方法進行水平和垂直居中，我這里只嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁面中心對齊圖像。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
