js只能獲取到元素的style樣式(行內(nèi)樣式),不能獲取到css樣式。
創(chuàng)新互聯(lián)網(wǎng)站建設(shè)服務(wù)商,為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù),網(wǎng)站設(shè)計(jì),成都網(wǎng)站托管等一站式綜合服務(wù)型公司,專業(yè)打造企業(yè)形象網(wǎng)站,讓您在眾多競爭對手中脫穎而出創(chuàng)新互聯(lián)。
使用jquery可以獲取到css樣式:
$(function(){
$(".tableStyle").css("background-color":"");
})
將background-color賦為空值就可以啦
jquery,了解過沒有?很好的js封裝庫。
先引入jquery.js,然后執(zhí)行:
$('.ewf').css('left','');
這要根據(jù)你原先是如何給它添加上樣式的,比如你是通過類名添加的,那你就應(yīng)該寫上這樣的代碼:要去除類名的類.className=''; 同理,如果你是通過id來命名的那就把id變成空??傊歉鶕?jù)你如何寫它的css樣式。
如果是繼承下來的樣式那只能單獨(dú)獲取來修改了。比如要隱藏的出現(xiàn),要修改的類名.css.display=''; 還有一種方法就是修改屬性的繼承方法,由于也是需要一個(gè)一個(gè)修改也很麻煩就不展開了。
當(dāng)然也可以像樓上的一樣寫一個(gè)公共的清楚樣式的類,然后通過js添加類名來修改,這個(gè)很方便,也很實(shí)用,比一種一種改方便,就是要寫一個(gè)比較全面的公共類。要添加的樣式的元素.className='你要添加的類名';
需求不是很明確,要是移除link進(jìn)來的css文件的話。那就是先找到所有l(wèi)ink標(biāo)簽,然后依次移除,代碼如下:
var links = document.querySelectorAll('link');
for(var i in links){
links[i].parentNode.removeChild(links[i])
}
其實(shí)js很不好用的,一般都使用jquery來寫,改變樣式的話我會使用兩種方法
使用jquery中的.css()函數(shù)改變樣式,這中方法很好用,可以在觸發(fā)事件的時(shí)候任意操作某個(gè)元素的樣式。
自定義一個(gè)class名字,比如.yangshi{} ,在觸發(fā)的事件里使用 .addclass()和.removeClass() 兩個(gè)函數(shù)添加或者刪除某一個(gè)class類。達(dá)到切換樣式的目的,這種方法比較清晰有條理。下面給出我寫的一段jquery 代碼。 這個(gè)的意思是,.box元素的鼠標(biāo)進(jìn)入會添加一個(gè)class類yangshi,離開的時(shí)候會刪除這個(gè)class類
script
$(function(){
$(".box").mouseover(function(){
$(this).addClass("yangshi");
})
$(".box").mouseout(function(){
$(this).removeClass("yangshi");
})
})???
/script
問題問的比較含糊吧,其實(shí)不太能理解是想要整理樣式,還是想要在原有基礎(chǔ)上覆蓋樣式。
======整理樣式=====
在我們寫樣式的時(shí)候,頁面的CSS在經(jīng)歷幾個(gè)版本的修改之后,可能有些樣式已經(jīng)用不到了,或許將某些樣式更名了而原來的忘了刪除,總之頁面中可能存 在著一些無用的樣式。這些無用的浪費(fèi)了一些服務(wù)器空間和帶寬消耗,也會增大我們的維護(hù)成本。下面介紹幾個(gè)分析無用樣式的工具:
【Dust-Me selectors】
Dust-Me是一個(gè)很有用也很好用的Firefox插件,它可以分析到你的頁面中調(diào)用的所有CSS文件并分析那些在頁面中沒有被用到。
支持本地和遠(yuǎn)程樣式文件,包括使用link標(biāo)簽、?xml-stylesheet?處理指令、@import語句等方式引入的樣式文件;(但是不支持頁面中的style塊和內(nèi)聯(lián)樣式)
支持IE條件注釋中引入的樣式文件;
可以檢查一個(gè)頁面,也可以檢查整個(gè)網(wǎng)站;
支持CSS1選擇器、大部分CSS2和CSS3選擇器;
理解通用的CSS hack,比如 “* html #fuck-ie”將會被認(rèn)為是”html #fuck-ie”;
支持Firefox 3.5和Firefox 3.0,事實(shí)上得益于FF 3.5的js引擎的改進(jìn),F(xiàn)F 3.5中的性能比FF 3.0要高50%。
你可以下載該項(xiàng)目的源代碼,了解更多請?jiān)L問 Dust-Me selector官方頁面。
【Page Speed】
Page Speed是Google提供的一個(gè)前端性能分析工具,有些類似于YSlow,但是提供了一些比較個(gè)性且很有用的工具,比如Remove unused CSS:
Page Speed和YSlow一樣依賴Firebug。
【CSS Redundancy Checker】
CSS Redundancy Checker 是一個(gè)免費(fèi)的在線應(yīng)用,可以檢查所有的使用某個(gè)CSS文件的頁面中無用的樣式??梢酝瑫r(shí)檢查某一個(gè)樣式在多個(gè)頁面中的使用情況。該工具的不足是雖然一次能 檢查多個(gè)HTML頁面,但每次只能檢查一個(gè)CSS文件,而且還要手動輸入:
【IntelliJ IDEA】
IntelliJ IDEA 這是一個(gè)頗強(qiáng)大的IDE,類似于DreamWeaver,不過在國內(nèi)用的不多。該軟件包括一個(gè)即時(shí)代碼分析工具(On-the-fly Code Analysis),可以分析CSS文件中未用到的class和id。
【Expression Web】
Expression Web作為微軟的新一代網(wǎng)站開發(fā)工具,還是有很多人使用的,其CSS Report功能可以檢查未用到需要被清除的CSS(我的確沒有使用EW開發(fā)過網(wǎng)站,希望使用該軟件的童鞋可以幫忙確認(rèn)一下這一點(diǎn))。
另外,通常我們將整個(gè)網(wǎng)站的樣式寫入一個(gè)或多個(gè)樣式文件中,然后在頁面中全部調(diào)用或者分模塊調(diào)用,那么某個(gè)CSS文件中的樣式可能在某個(gè)頁面中的確 沒有用到但是在其它的頁面中被用到了,所以使用這些工具檢測CSS文件中多余的樣式的時(shí)候,需要保持一定的謹(jǐn)慎,清除樣式可能會影響到其它的頁面,所以 page speed提供的檢查結(jié)果只適用于單個(gè)頁面,不適合整個(gè)網(wǎng)站,而使用Dust-Me或CSS Redundancy Checker的時(shí)候可以對整個(gè)網(wǎng)站或者網(wǎng)站的多個(gè)頁面同時(shí)檢查,這樣可能能避免萬無一失。
======覆蓋樣式=====
有時(shí)候在寫CSS的過程中,某些限制總是不起作用,這就涉及了CSS樣式覆蓋的問題,如下:
/*?css樣式?*/
#navigator?{height:100%;width:200px;position:?absolute;left:?0;border:?solid?2?#EEE;}
.current_block?{border:?solid?2?#AE0;}
CSS優(yōu)先級如下排列:
1. 樣式表的元素選擇器選擇越精確,則其中的樣式優(yōu)先級越高:id選擇器指定的樣式 類選擇器指定的樣式 元素類型選擇器指定的樣式所以上例中,#navigator的樣式優(yōu)先級大于.current_block的優(yōu)先級,及時(shí).current_block是最新添加的,也不起作用。
2. 對于相同類型選擇器制定的樣式,在樣式表文件中,越靠后的優(yōu)先級越高注意,這里是樣式表文件中越靠后的優(yōu)先級越高,而不是在元素class出現(xiàn)的順序。比如.class2 在樣式表中出現(xiàn)在.class1之后:
/*?Css代碼?*/?
.class1?{color:?black;}??
.class2?{color:?red;}
而某個(gè)元素指定class時(shí)采用 class="class2 class1"這種方式指定,此時(shí)雖然class1在元素中指定時(shí)排在class2的后面,但因?yàn)樵跇邮奖砦募衏lass1處于class2前面,此時(shí)仍然是class2的優(yōu)先級更高,color的屬性為red,而非black。
3. 如果要讓某個(gè)樣式的優(yōu)先級變高,可以使用!important來指定:
/*?Css代碼??*/
.class1?{color:?black?!important;??}??
.class2?{color:?red;}
此時(shí)class將使用black,而非red。
對于一開始遇到的問題,有兩種解決方案:
1. 將border從#navigator中拿出來,放到一個(gè)class .block中,而.block放.current_block之前:
/*?Css代碼?*/??
#navigator?{height:?100%;width:?200;position:?absolute;?left:?0;??}??
.block?{border:?solid?2?#EEE;?}
.current_block?{border:?solid?2?#AE0;}
需要莫仁為#navigator元素指定class="block"
2. 使用!important:
/*?Css代碼??*/
#navigator?{height:?100%;width:?200;position:?absolute;left:?0;?border:?solid?2?#EEE;}??
.current_block?{border:?solid?2?#AE0?!important;}
此時(shí)無需作任何其他改動即可生效??梢姷诙N方案更簡單一些。