建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
隨著瀏覽器不斷的升級(jí)改進(jìn)，CSS和JavaScript之間的界限越來(lái)越模糊。本來(lái)它們是負(fù)責(zé)著完全不同的功能，但最終，它們都屬于網(wǎng)頁(yè)前端技術(shù)，它們需要相互密切的合作。我們的網(wǎng)頁(yè)中都有.js文件和.css文件，但這并不意味著CSS和js是獨(dú)立不能交互的。下面要講的這五種JavaScript和CSS共同合作的方法你也許未必知道！
成都創(chuàng)新互聯(lián)公司成立于2013年，先為烏翠等服務(wù)建站，烏翠等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為烏翠企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
用JavaScript獲取偽元素(pseudo-element)屬性
大家都知道如何通過(guò)一個(gè)元素的style屬性獲取它的CSS樣式值，但能獲取偽元素(pseudo-element)的屬性值嗎？可以的，使用JavaScript也可以訪(fǎng)問(wèn)頁(yè)面中的偽元素。
- // 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');
看見(jiàn)了嗎，我能訪(fǎng)問(wèn)偽元素里的content屬性值。如果你想創(chuàng)建一個(gè)動(dòng)態(tài)的，風(fēng)格別致的網(wǎng)站，這是一種非常有用的技術(shù)！
classList API
很多的JavaScript工具庫(kù)里都有addClass，removeClass和toggleClass等方法。為了對(duì)老式瀏覽器的兼容，這些類(lèi)庫(kù)采用的方法都是先搜索元素的className，追加和刪除這個(gè)類(lèi)，然后更新className。其實(shí)有一個(gè)新型的API提供了添加，刪除和反轉(zhuǎn)CSS類(lèi)屬性的方法，叫做classList：
- myDiv.classList.add('myCssClass'); // Adds a class
- myDiv.classList.remove('myCssClass'); // Removes a class
- myDiv.classList.toggle('myCssClass'); // Toggles a class
大多數(shù)的瀏覽器里很早就實(shí)現(xiàn)了classListAPI，而且最終IE10里也實(shí)現(xiàn)了它。
直接對(duì)樣式表進(jìn)行添加和刪除樣式規(guī)則
我們都非常熟悉使用element.style.propertyName來(lái)修改樣式，使用JavaScript能幫助我們做到這些，但你知道如何新增或修一個(gè)現(xiàn)有的CSS樣式規(guī)則嗎？其實(shí)非常的簡(jiǎn)單。
- 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");
這種方法通常是用來(lái)創(chuàng)建一個(gè)新的樣式規(guī)則，但如果你想修改一個(gè)現(xiàn)有的規(guī)則，也可以這樣做。
加載CSS文件
延遲加載圖片、JSON、腳本等是用來(lái)加快頁(yè)面顯示速度的好方法。我們可以使用curl.js等這樣JavaScript加載器來(lái)延遲加載這些外部資源，可你知道CSS樣式表也可以延遲加載嗎，而且在加載成功后回調(diào)函數(shù)會(huì)給予通知。
- curl(
- [
- "namespace/MyWidget",
- "css!namespace/resources/MyWidget.css"
- ],
- function(MyWidget) {
- // 你可以對(duì)MyWidget進(jìn)行操作
- // 這里沒(méi)有對(duì)這個(gè)CSS文件引用，因?yàn)椴恍枰?
- // 我們只需要它已經(jīng)加載到頁(yè)面上了
- }
- });
本網(wǎng)站使用的PrismJS語(yǔ)法高亮腳本就是延遲加載的。當(dāng)所有的資源都加載后，回調(diào)函數(shù)就會(huì)觸發(fā)，我可在回調(diào)函數(shù)里加載它。非常有用！
CSS鼠標(biāo)指針事件
CSS鼠標(biāo)指針事件pointer-events屬性非常的有趣，它的功效非常像JavaScript，當(dāng)你把這個(gè)屬性設(shè)置為none時(shí)，它能有效的阻止禁止這個(gè)元素，你也許會(huì)說(shuō)“這又如何？”，但事實(shí)上，它是禁止了這個(gè)元素上的任何JavaScript事件或回調(diào)函數(shù)！
- .disabled { pointer-events: none; }
點(diǎn)擊這個(gè)元素，你會(huì)發(fā)現(xiàn)任何你放置在這個(gè)元素上的監(jiān)聽(tīng)器都不會(huì)觸發(fā)任何事件。一個(gè)神奇的功能，真的——你不在需要為了防止某個(gè)事件會(huì)被觸發(fā)而去檢查某個(gè)css類(lèi)是否存在。
就是這5給你也許還沒(méi)有發(fā)現(xiàn)的CSS和JavaScript交互的方法。你還有新的發(fā)現(xiàn)嗎？分享出來(lái)！
英文原文：5 Ways that CSS and JavaScript Interact That You May Not Know About.
譯文鏈接：http://www.webhek.com/ways-css-javascript-interact/
網(wǎng)站標(biāo)題：5種你未必知道的JavaScript和CSS交互的方法
當(dāng)前網(wǎng)址：http://m.fisionsoft.com.cn/article/cdgohgh.html
