紅河州領先的互聯網服務提供商
以技術為后盾 以服務求發展
首頁 >> 知識寶庫 >> 網頁設計 >> 信息內容

5種常見的CSS與JS交互方法

     CSS和JavaScript: 在各個瀏覽器版本中的分界線似乎變得越來越模糊,兩者所完成的功能差異非常明顯,但說到底他們都是前端技術,所以確實需要緊密地配合。雖然我們將代碼拆分到獨立的 .js 文件和 .css 文件中,但他們之間還能進行一些更密切的交互,這些通常是普通JS框架所不支持的。

  下面是你可能不知道的CSS和JS的交互的5種方式: 

  使用JavaScript獲取CSS偽元素屬性

  我們可以通過DOM元素的 style 屬性獲取基本的CSS樣式值, 但怎么獲取CSS偽元素屬性呢? 確實,JavaScript提供了相應的API:

你可以查看作者的博客文章: Device State Detection, 如果你想創建動態,獨特的網站那會非常有用。

  classList API

  在最受歡迎的JS框架中,我們可以使用 addClass , removeClass , 以及 toggleClass 方法來處理 class 列表. 為了兼容舊版本瀏覽器,每個框架都會先獲取元素的 className屬性(類型為String) 并添加/移除 相應的 class, 然后再更新 className 字符串. 現在,有一個新的API可以用來高效地 添加,刪除,切換 class,名為 classList:

大多數瀏覽器支持 classList 已經好幾年了,但是 IE 很杯具的在 10.0 版本才開始支持。

  直接操作樣式表

  我們對于使用 element.style.propertyName 這種形式的方法修改樣式都很熟悉,并可以通過 JavaScript 工具來處理,但你知道 怎樣在新的和已存在的 stylesheets 中 讀取和寫入樣式規則 嗎? 這個API也是很簡單的:

通常是使用此種方式來創建一個新的樣式表,但如果你想修改一個現有的樣式表也可以,快試試吧!

  使用 Loader 加載 CSS 文件

  對圖片, JSON,以及JS腳本的懶加載是減少頁面顯示時間的有效方法。我們可以通過 curl.js 或者 jQeury 庫加載這些外部資源, 但你知道如何 懶加載樣式表 并在加載完成后觸發回調函數么?

 本博客的原文 就使用懶加載 導入了 PrismJS,基于 pre 元素實現文字的高亮顯示。在所有資源(包括css)加載完成后,會調用回調函數,這應該是很有用的。

  CSS 的 pointer-events 屬性

  CSS' pointer-events 屬性扮演了一種類似 JavaScript 的方式, 如果 pointer-events 值為 none 則禁用某個元素,不為 none 則允許元素的常用功能??赡苣銜? "這有什么用?" 好處是 pointer-events 能高效地阻止觸發 JavaScript 事件.

1
.disabled { pointer-events: none; }

在元素上的 click 以及通過 addEventListener 添加的回調函數都不會被觸發。這真是一個完美的屬性,真的 —— 你在回調函數中不需要先檢測 className  以決定某些分支。

(已被查看 人次)
分享到:

正規網絡公司

專業的系統開發公司

紅河本地化服務

您身邊的網絡服務專家

100%正版授權

全套自主開發授權使用

按需求定制開發

滿足您各種開發需求

完善售后服務

7×24小時·極速響應

亚洲中文无码亚洲人成影院