DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 你未必知道的JavaScript和CSS交互的5種方法
你未必知道的JavaScript和CSS交互的5種方法
編輯:JavaScript綜合知識     

 網頁中都有.js文件和.css文件,但這並不意味著CSS和js是獨立不能交互的,下面與大家分享js與css交互的5種方法

隨著浏覽器不斷的升級改進,CSS和JavaScript之間的界限越來越模糊。本來它們是負責著完全不同的功能,但最終,它們都屬於網頁前端技術,它們需要相互密切的合作。我們的網頁中都有.js文件和.css文件,但這並不意味著CSS和js是獨立不能交互的。下面要講的這五種JavaScript和CSS共同合作的方法你也許未必知道!    用JavaScript獲取偽元素(pseudo-element)屬性    大家都知道如何通過一個元素的style屬性獲取它的CSS樣式值,但能獲取偽元素(pseudo-element)的屬性值嗎?可以的,使用JavaScript也可以訪問頁面中的偽元素。   代碼如下: <span style="font-size:18px;">// Get the color value of .element:before  var color = window.getComputedStyle(  document.querySelector('.element'), ':before'  ).getPropertyValue('color');    // Get the content value of .element:before  var content = window.getComputedStyle(  document.querySelector('.element'), ':before'  ).getPropertyValue('content');</span>    看見了嗎,我能訪問偽元素裡的content屬性值。如果你想創建一個動態的,風格別致的網站,這是一種非常有用的技術!    classList API    很多的JavaScript工具庫裡都有addClass,removeClass和toggleClass等方法。為了對老式浏覽器的兼容,這些類庫采用的方法都是先搜索元素的className,追加和刪除這個類,然後更新className。其實有一個新型的API提供了添加,刪除和反轉CSS類屬性的方法,叫做classList:  代碼如下: <span style="font-size:18px;">myDiv.classList.add('myCssClass'); // Adds a class  myDiv.classList.remove('myCssClass'); // Removes a class  myDiv.classList.toggle('myCssClass'); // Toggles a class</span>    大多數的浏覽器裡很早就實現了classListAPI,而且最終IE10裡也實現了它。    直接對樣式表進行添加和刪除樣式規則    我們都非常熟悉使用element.style.propertyName來修改樣式,使用JavaScript能幫助我們做到這些,但你知道如何新增或修一個現有的CSS樣式規則嗎?其實非常的簡單。  復制代碼 代碼如下: <span style="font-size:18px;">function addCSSRule(sheet, selector, rules, index) {  if(sheet.insertRule) {  sheet.insertRule(selector + "{" + rules + "}", index);  }  else {  sheet.addRule(selector, rules, index);  }  }  // Use it!  addCSSRule(document.styleSheets[0], "header", "float: left");  </span>    這種方法通常是用來創建一個新的樣式規則,但如果你想修改一個現有的規則,也可以這樣做。    加載CSS文件    延遲加載圖片、JSON、腳本等是用來加快頁面顯示速度的好方法。我們可以使用curl.js等這樣JavaScript加載器來延遲加載這些外部資源,可你知道CSS樣式表也可以延遲加載嗎,而且在加載成功後回調函數會給予通知。  復制代碼 代碼如下: <span style="font-size:18px;">curl(  [  "namespace/MyWidget",  "css!namespace/resources/MyWidget.css"  ],  function(MyWidget) {  // 你可以對MyWidget進行操作  // 這裡沒有對這個CSS文件引用,因為不需要;  // 我們只需要它已經加載到頁面上了  }  });</span>    當所有的資源都加載後,回調函數就會觸發,我可在回調函數裡加載它。非常有用!    CSS鼠標指針事件    CSS鼠標指針事件pointer-events屬性非常的有趣,它的功效非常像JavaScript,當你把這個屬性設置為none時,它能有效的阻止禁止這個元素,你也許會說“這又如何?”,但事實上,它是禁止了這個元素上的任何JavaScript事件或回調函數!  復制代碼 代碼如下: <span style="font-size:18px;">.disabled { pointer-events: none; }</span>    點擊這個元素,你會發現任何你放置在這個元素上的監聽器都不會觸發任何事件。一個神奇的功能,真的——你不在需要為了防止某個事件會被觸發而去檢查某個css類是否存在。    就是這5給你也許還沒有發現的CSS和JavaScript交互的方法。你還有新的發現嗎?分享出來!   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved