[Javascript]cssText基本使用指北

MASAILA 發布于2019-08-21 12:31 / 1316人閱讀

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

一、cssText之起步

那些年，我們是這樣設置樣式的：

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

現如今，我們可以這樣搞：

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

W3C是這樣描述cssText：

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

我以為關鍵在于第四條：

替換當前對象為新對象。

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

舉個栗子：

這里有一個

，長下面這個模樣：

.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;

然后在加上現在的樣式：

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

最后的分號被丟掉了。

結果就是當我們再使用

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

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

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

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

三、cssText之靠邊停車

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

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

作業本同學說：

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

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

大家國慶節快樂！

GPU云服務器云服務器 JavaScript基本對象 javascript基本類型 javascript基本語法 javascript基本教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87644.html

[Javascript]cssText基本使用指北

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

tulayang 2019-08-28 17:59 評論0 收藏0
Nginx配置指北之gzip

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

yunhao 2019-07-25 14:00 評論0 收藏0
JavaScript 作用域不完全指北

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

coordinate35 2019-08-23 18:02 評論0 收藏0
ES6指北【6】——詳談解構賦值【附贈練習題】

摘要：指北詳談解構賦值附贈練習題一何謂解構賦值基本概念首先我們看一下給的定義解構賦值語法是一個表達式，這使得可以將值從數組或屬性從對象提取到不同的變量中從定義中，我們可以發現解構賦值的作用是對變量進行賦值主要通過兩個方面實現這個作用數組將數組中的 ES6指北【6】——詳談解構賦值【附贈練習題】一、何謂解構賦值？ 1. 基本概念首先我們看一下MDN給的定義解構賦值語法是一個 Javasc...

sorra 2019-08-23 11:33 評論0 收藏0
React Native 基礎練習指北（一）

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

nidaye 2019-08-21 10:29 評論0 收藏0