<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
    • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
    1. 長城號首頁
    2. 投稿

    js樣式選擇（js追加樣式css樣式的方法）

    長城號SEO專員 ? ? 投稿

    介紹

    JSS是CSS的創作工具，它允許你使用JavaScript以聲明，無沖突和可重用的方式描述樣式。它可以在瀏覽器，服務器端或在構建時在Node中編譯。JSS與框架無關。它由多個包組成：核心部分，插件以及框架集成等。

    使用JavaScript來編寫你的CSS樣式代碼——JSS

    Github

    https://github.com/cssinjs/jss stars:5.1k

    快速開始

    如果你已經對使用JSS感興趣，可以使用在線代碼編輯器。在CodeSandbox（一個非常實用的在線編輯器，可以用來學習各種編程技能）上嘗試Hello World示例。以下是三種不同框架下的用法（代碼圖片生成自carbon網站）：

    • JSS
    使用JavaScript來編寫你的CSS樣式代碼——JSS
    • React-JSS
    使用JavaScript來編寫你的CSS樣式代碼——JSS
    • Styled-JSS
    使用JavaScript來編寫你的CSS樣式代碼——JSS

    特性

    • 真實的CSS

    JSS生成實際的CSS，而不是內聯樣式。它支持每個現有的CSS功能。CSS規則只創建一次，并使用其類名與元素重復使用，與內聯樣式相反。此外，當DOM元素更新時，將應用先前創建的CSS規則。

    • 無沖突選擇器

    JSS默認生成唯一的類名。它允許避免典型的CSS問題，默認情況下一切都是全局的。它完全消除了命名約定的需要。

    • 代碼重用

    使用JavaScript作為宿主語言使我們有機會以常規CSS無法實現的方式重用CSS規則。您可以利用JavaScript模塊，變量，函數，數學運算等。如果做得好，它仍然可以完全聲明。

    • 易于拆卸和修改

    CSS規則的明確使用允許您跟蹤消費者并確定是否可以安全地刪除或修改它。

    • 動態Style

    使用JavaScript函數和Observable可以在瀏覽器中動態生成樣式，使有機會訪問應用程序狀態，瀏覽器API或遠程數據以進行樣式設置。你不僅可以定義一次樣式，還可以在任何時間點以有效的方式更新樣式。

    • 用戶控制的動畫

    JSS可以高效地處理CSS更新，可以使用它創建復雜的動畫。使用函數值，Observables并將它們與CSS過渡相結合，可以為用戶控制的動畫提供最大的性能。對于預定義的動畫，使用@keyframes和transition更好，因為它們將完全取消阻止JavaScript線程。

    • 關鍵的CSS

    要優化第一次繪制的時間，你可以使用服務器端渲染并提取關鍵CSS?？梢詫SS的呈現與HTML的呈現結合起來，這樣就不會生成未使用的CSS。它將導致在服務器端呈現期間提取的最小關鍵CSS，并允許內聯它。

    • 插件

    JSS核心實現了基于插件的架構。它允許您創建可以實現自定義語法或其他強大功能的自定義插件。JSS有許多官方插件，可以單獨安裝或使用默認預設。社區插件的一個很好的例子是jss-rtl。

    • Expressive 語法

    由于各種插件，JSS允許您使用現有的全局類名來嵌套，全局選擇器和組合。例如，允許您以比CSS更可讀的方式表達屬性。如果要直接從瀏覽器開發工具復制粘貼樣式，也可以使用模板字符串。
    jss-plugin-expandbox-shadow

    • 完全隔離

    另一個有用的插件示例是，它允許您完全隔離元素與全局級聯規則，并可能覆蓋不需要的屬性。在創建應該在第三方文檔內部呈現的窗口小部件時尤其有用。jss-plugin-isolate

    • React整合。

    React-JSS包提供了一些額外的功能：

    1. 動態主題 – 允許基于上下文的主題傳播和運行時更新。
    2. 關鍵CSS提取 – 僅提取渲染組件中的CSS。
    3. 延遲評估 – 樣式表在組件安裝時創建。
    4. 樣式表的靜態部分在所有元素之間共享。
    5. 使用props作為參數自動更新函數值和規則。
    • JavaScript構建管道

    CSS不需要額外的構建管道配置。無論你選擇構建JavaScript的工具是什么，它都可以與JSS一起使用。

    安裝使用

    yarn add jss

    yarn add jss-preset-default //使用默認設置

    import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())
// 創造你的style.
const style = {
 myButton: {
 color: 'green'
 }
}
//編譯樣式，應用插件。
const sheet = jss.createStyleSheet(style)
//如果要在客戶端上呈現，請將其插入DOM。
sheet.attach()
//如果要渲染服務器端，請獲取CSS文本。
sheet.toString()
    • 使用自定義插件進行設置
    import jss from 'jss'
import camelCase from 'jss-plugin-camel-case'
import somePlugin from 'jss-some-plugin'
//使用插件。
jss.use(camelCase(), somePlugin())
// Create your style.
const style = {
 myButton: {
 color: 'green'
 }
}
//編譯樣式，應用插件。
const sheet = jss.createStyleSheet(style)
// 如果要在客戶端上呈現，請將其插入DOM
sheet.attach()
// 如果要渲染服務器端，請獲取CSS文本。
sheet.toString()
    • 指定DOM插入點
    <head>
 <title>JSS</title>
 <!-- 自定義插入點 -->
</head>

    import jss from 'jss'
jss.setup({insertionPoint: 'custom-insertion-point'})

    <head>
 <title>JSS in body</title>
</head>
<body>
 <div id="insertion-point">
 這可能是你選擇的任何DOM節點，可以作為插入點。
 </div>
</body

    import jss from 'jss'
jss.setup({
 insertionPoint: document.getElementById('insertion-point')
})

    簡單案例

    通過兩張圖片來體驗：

    使用JavaScript來編寫你的CSS樣式代碼——JSS
    使用JavaScript來編寫你的CSS樣式代碼——JSS

    總結

    JSS的功能是十分強大的，不僅僅讓寫css的方式放到了JavaScript，這樣對更加喜愛編寫javascript的小伙伴來說是值得嘗試的，而且還支持服務器端渲染等更多高級的特性，前端技術百花齊放，但目前仍然不變的是掌握JavaScript者得天下的時代！

    贊 (0)

    相關推薦

    版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费