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

jopen 10年前發布 | 15K 次閱讀 CSS JS 前端技術

翻譯人員: 鐵錨
翻譯日期: 2014年01月22日
原文日期: 2014年01月20日
原文鏈接:  5 Ways that CSS and JavaScript Interact That You May Not Know About</span>

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

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

    // 獲取 .element:before 的 color 值

    var color = window.getComputedStyle(

        document.querySelector('.element'), ':before'

    ).getPropertyValue('color');



// 獲取 .element:before 的 content 值  
var content = window.getComputedStyle(  
    document.querySelector('.element'), ':before'  
).getPropertyValue('content');  </pre><a style="text-indent:0px;" title="派生到我的代碼片" href="/misc/goto?guid=4959550845390513257" target="_blank"></a></div>



</div>
</div>


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

classList API

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






    myDiv.classList.add('myCssClass'); // 添加 class  
    myDiv.classList.remove('myCssClass'); // 移除 class  
    myDiv.classList.toggle('myCssClass'); // 切換 class  

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

直接操作樣式表

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






    function addCSSRule(sheet, selector, rules, index) {

        // 注意 sheet 的新 API

        if(sheet.insertRule) {

            sheet.insertRule(selector + "{" + rules + "}", index);

        }

        else {

            sheet.addRule(selector, rules, index);

        }

    }



// 調用!  
addCSSRule(document.styleSheets[0], "header", "float: left");  </pre><a style="text-indent:0px;" title="派生到我的代碼片" href="/misc/goto?guid=4959550845390513257" target="_blank"></a></div>



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

使用 Loader 加載 CSS 文件

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






    curl(  
        [  
            "namespace/MyWidget",  
            "css!namespace/resources/MyWidget.css"  
        ],   
        function(MyWidget) {  
            // 使用 MyWidget 進行  
            // The CSS reference isn't in the signature because we don't care about it;  
            // we just care that it is now in the page  
        }  
    });  

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



CSS 的 pointer-events 屬性

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


 
    .disabled { pointer-events: none; }  

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



來自：http://blog.csdn.net/renfufei/article/details/18665457

                    

                    

                        
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

                        
                        
                    


                

                

                    

                        
相關經驗

                        
                    

                    

                        
相關資訊

                        
                    

                    

                        
相關文檔