成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

[Javascript]cssText基本使用指北

tulayang / 1521人閱讀

摘要：如果解析失敗則終止運(yùn)行。如果新對(duì)象的并不匹配當(dāng)前對(duì)象的則拋出異常。替換當(dāng)前對(duì)象為新對(duì)象。是替換，也就是說(shuō)會(huì)覆蓋到目標(biāo)元素之前本身所具有的全部樣式繼承的不算。除此以外，下返回的屬性和值全是大寫(xiě)，為了避免日后出現(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類(lèi)型
cssText特性必須返回序列化的CSS規(guī)則。
當(dāng)設(shè)置cssText特性時(shí)運(yùn)行這些步驟：
 1. 解析其值。
 2. 如果解析失敗則終止運(yùn)行。
 3. 如果新對(duì)象的type并不匹配當(dāng)前對(duì)象的type則拋出"InvalidModificationError"異常。
 4. 替換當(dāng)前對(duì)象為新對(duì)象。

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

替換當(dāng)前對(duì)象為新對(duì)象。

是替換，也就是說(shuō)會(huì)覆蓋到目標(biāo)元素之前本身所具有的全部樣式（繼承的不算）。

舉個(gè)栗子：

這里有一個(gè)

，長(zhǎng)下面這個(gè)模樣：

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

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

xxx.style.height= "466px";

但是客官你不可以這么寫(xiě)：

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

二、cssText之提速

基于上面的原因，我們?cè)谑褂胏ssText修改某個(gè)元素樣式的時(shí)候，需要首先得到它當(dāng)前的樣式：

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

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

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

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

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

當(dāng)我們使用var xxx_style = xxx.style.cssText;得到樣式的時(shí)候，最后是沒(méi)有分號(hào)的。

也就是說(shuō)，如果某個(gè)元素的樣式是：height: 100px; width: 100px;overflow: hidden;

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

最后的分號(hào)被丟掉了。

結(jié)果就是當(dāng)我們?cè)偈褂?/p> 

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

來(lái)處理樣式時(shí)，會(huì)出現(xiàn)：height: 100px; width: 100px; overflow: hiddenbackground:#F60;

當(dāng)然你可以選擇使用：xxx_style = "background:#F60;" + xxx_style的方式，最后沒(méi)有分號(hào)也不會(huì)影響，但是世事難料，安全起見(jiàn)，還是額外判斷一下，補(bǔ)上這個(gè)分號(hào)比較可靠。

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

三、cssText之靠邊停車(chē)

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

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

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

某注明作家（反正我是不認(rèn)識(shí)）說(shuō)：

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

大家國(guó)慶節(jié)快樂(lè)！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110941.html

相關(guān)文章

  • [Javascript]cssText基本使用指北

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

    MASAILA 評(píng)論0 收藏0

  • Nginx配置指北之gzip

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

    yunhao 評(píng)論0 收藏0

  • JavaScript 作用域不完全指北

    摘要：一旦到達(dá)頂層全局作用域，可能找到，也可能沒(méi)有找到，查找過(guò)程都必須停止。當(dāng)引擎執(zhí)行查詢(xún)時(shí)，如果查詢(xún)?cè)谒星短椎淖饔糜蛑斜閷げ坏剿璧淖兞?，引擎就?huì)拋出異常。代表作用域判別失敗相關(guān)，而則代表作用域判別成功了，但是對(duì)結(jié)果的操作是非法或不合理的。 什么是作用域 對(duì)于幾乎所有編程語(yǔ)言，最基本的功能之一就是能夠存儲(chǔ)變量的值，并且能在之后對(duì)這個(gè)值進(jìn)行訪(fǎng)問(wèn)和修改。這樣就會(huì)帶來(lái)幾個(gè)問(wèn)題，這些變量存儲(chǔ)在哪...

    coordinate35 評(píng)論0 收藏0

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

    摘要：指北詳談解構(gòu)賦值附贈(zèng)練習(xí)題一何謂解構(gòu)賦值基本概念首先我們看一下給的定義解構(gòu)賦值語(yǔ)法是一個(gè)表達(dá)式，這使得可以將值從數(shù)組或?qū)傩詮膶?duì)象提取到不同的變量中從定義中，我們可以發(fā)現(xiàn)解構(gòu)賦值的作用是對(duì)變量進(jìn)行賦值主要通過(guò)兩個(gè)方面實(shí)現(xiàn)這個(gè)作用數(shù)組將數(shù)組中的 ES6指北【6】——詳談解構(gòu)賦值【附贈(zèng)練習(xí)題】 一、何謂解構(gòu)賦值？ 1. 基本概念 首先我們看一下MDN給的定義 解構(gòu)賦值語(yǔ)法是一個(gè) Javasc...

    sorra 評(píng)論0 收藏0

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

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

    nidaye 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<