成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[Javascript]cssText基本使用指北

tulayang / 1489人閱讀

摘要：如果解析失敗則終止運行。如果新對象的并不匹配當前對象的則拋出異常。替換當前對象為新對象。是替換，也就是說會覆蓋到目標元素之前本身所具有的全部樣式繼承的不算。除此以外，下返回的屬性和值全是大寫，為了避免日后出現(xiàn)意外，還是比較好。

一、cssText之起步

那些年，我們是這樣設(shè)置樣式的：

xxx.style.width = "233px";
xxx.style.position = "fixed";
xxx.style.left = "233px";

現(xiàn)如今，我們可以這樣搞：

xxx.style.cssText="width:233px;height:233px;position:fixed";

W3C是這樣描述cssText：

cssText，DOMString類型
cssText特性必須返回序列化的CSS規(guī)則。
當設(shè)置cssText特性時運行這些步驟：
 1. 解析其值。
 2. 如果解析失敗則終止運行。
 3. 如果新對象的type并不匹配當前對象的type則拋出"InvalidModificationError"異常。
 4. 替換當前對象為新對象。

我以為關(guān)鍵在于第四條：

替換當前對象為新對象。

是替換，也就是說會覆蓋到目標元素之前本身所具有的全部樣式（繼承的不算）。

舉個栗子：

這里有一個

，長下面這個模樣：

.xxx {height:233px;width:233px;background:#F60;}

然后我要改變它的高度，我可以這么寫：

xxx.style.height= "466px";

但是客官你不可以這么寫：

xxx.style.cssText="height:466px;";

二、cssText之提速

基于上面的原因，我們在使用cssText修改某個元素樣式的時候，需要首先得到它當前的樣式：

var xxx = document.getElementById("warp");
var xxx_style = xxx.style.cssText;

然后在加上現(xiàn)在的樣式：

xxx_style += "position:fixed;"
xxx.style.cssText = xxx_style;

但是，客官如果貴司有下面這種情況，還請留步。

面對這種喪心病狂、男默女淚的情況，我們需要額外注意一點：

當我們使用var xxx_style = xxx.style.cssText;得到樣式的時候，最后是沒有分號的。

也就是說，如果某個元素的樣式是：height: 100px; width: 100px;overflow: hidden;

在IE6/7/8下我們會得到：HEIGHT: 100PX; WIDTH: 100PX; OVERFLOW: HIDDEN

最后的分號被丟掉了。

結(jié)果就是當我們再使用

xxx_style += "background:#F60;"
xxx.style.cssText = xxx_style;

來處理樣式時，會出現(xiàn)：height: 100px; width: 100px; overflow: hiddenbackground:#F60;

當然你可以選擇使用：xxx_style = "background:#F60;" + xxx_style的方式，最后沒有分號也不會影響，但是世事難料，安全起見，還是額外判斷一下，補上這個分號比較可靠。

除此以外，IE6/7/8下返回的屬性和值全是大寫，為了避免日后出現(xiàn)意外，還是.toLowerCase( )比較好。

三、cssText之靠邊停車

大家一路上在前端的道路上馳騁下去吧，就不用靠邊停車了！

馬上就要回家給偉大的祖國母親慶祝生日了，微博上出現(xiàn)了2種不同的聲音：

作業(yè)本同學(xué)說：

某注明作家（反正我是不認識）說：

作為還在上班（班，小名SegmentFault）的人，我就不說什么了...

大家國慶節(jié)快樂！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110941.html

相關(guān)文章

  • [Javascript]cssText基本使用指北

    摘要：如果解析失敗則終止運行。如果新對象的并不匹配當前對象的則拋出異常。替換當前對象為新對象。是替換，也就是說會覆蓋到目標元素之前本身所具有的全部樣式繼承的不算。除此以外，下返回的屬性和值全是大寫，為了避免日后出現(xiàn)意外，還是比較好。 一、cssText之起步 那些年，我們是這樣設(shè)置樣式的： xxx.style.width = 233px; xxx.style.position = fix...

    MASAILA 評論0 收藏0

  • Nginx配置指北之gzip

    摘要：如有錯誤，歡迎指正。如果使用了進行反向代理，那么和后端的之間默認是用協(xié)議通信的。如果不是這樣，最好設(shè)置為，因為這會造成額外的開銷。一個比較好的處理方式是放在或級別單獨處理。 無論是前端還是后端，在部署項目時，時常免不了用到Nginx，小項目也時常做個反向代理啥的。今天就簡單直接，聊一下其中的一個點——gzip。如有錯誤，歡迎指正。 一般服務(wù)器端常用的是 Ubuntu、CentOS、Li...

    yunhao 評論0 收藏0

  • JavaScript 作用域不完全指北

    摘要：一旦到達頂層全局作用域，可能找到，也可能沒有找到，查找過程都必須停止。當引擎執(zhí)行查詢時，如果查詢在所有嵌套的作用域中遍尋不到所需的變量，引擎就會拋出異常。代表作用域判別失敗相關(guān)，而則代表作用域判別成功了，但是對結(jié)果的操作是非法或不合理的。 什么是作用域 對于幾乎所有編程語言，最基本的功能之一就是能夠存儲變量的值，并且能在之后對這個值進行訪問和修改。這樣就會帶來幾個問題，這些變量存儲在哪...

    coordinate35 評論0 收藏0

  • ES6指北【6】——詳談解構(gòu)賦值【附贈練習(xí)題】

    摘要：指北詳談解構(gòu)賦值附贈練習(xí)題一何謂解構(gòu)賦值基本概念首先我們看一下給的定義解構(gòu)賦值語法是一個表達式，這使得可以將值從數(shù)組或?qū)傩詮膶ο筇崛〉讲煌淖兞恐袕亩x中，我們可以發(fā)現(xiàn)解構(gòu)賦值的作用是對變量進行賦值主要通過兩個方面實現(xiàn)這個作用數(shù)組將數(shù)組中的 ES6指北【6】——詳談解構(gòu)賦值【附贈練習(xí)題】 一、何謂解構(gòu)賦值？ 1. 基本概念 首先我們看一下MDN給的定義 解構(gòu)賦值語法是一個 Javasc...

    sorra 評論0 收藏0

  • React Native 基礎(chǔ)練習(xí)指北（一）

    摘要：圍觀本文需自備，，以及。使用打開，并點擊，會看到模擬器以及此項目對應(yīng)的內(nèi)容，效果如下如果想要修改顯示內(nèi)容，請打開，里面是一堆模樣的東西。接下來，我們按照教程，來展示一張電影海報，為了方便，我們直接修改。 原文鏈接：http://www.tinghaige.com/ 本著什么都要攙和的原則，一起來看看React Native是如何開發(fā)iOS APP。 圍觀本文需自備Mac OSX ，...

    nidaye 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<