細(xì)說(shuō) jQuery 樣式篇（一） - 樣式的獲取與設(shè)置

chengtao1633 發(fā)布于2019-08-19 14:53 / 3219人閱讀

摘要：在元素一篇學(xué)習(xí)了通過(guò)方法可以為元素添加樣式，但是對(duì)樣式的操作不僅僅限于添加，例如取得元素特定樣式，設(shè)置元素樣式等等。設(shè)置樣式提供了一個(gè)方法來(lái)操作樣式，這個(gè)方法將獲取樣式設(shè)置樣式的作用集中了在一起，非常方便我們對(duì)元素樣式進(jìn)行操作。

在元素一篇學(xué)習(xí)了通過(guò) addClass 方法可以為元素添加樣式，但是對(duì)樣式的操作不僅僅限于添加，例如取得元素特定樣式，設(shè)置元素樣式等等。

設(shè)置樣式

jQuery 提供了一個(gè) .css() 方法來(lái)操作樣式，這個(gè)方法將獲取樣式設(shè)置樣式的作用集中了在一起，非常方便我們對(duì)元素樣式進(jìn)行操作。

test

我們來(lái)獲取這個(gè) div 的樣式，單個(gè)樣式可以這樣來(lái)獲得：

$("div").css("color") //rgb(173, 216, 230)

多個(gè)樣式可以這樣來(lái)獲得：

    $("div").css(["color", "font-size"])//Object {color: "rgb(173, 216, 230)", font-size: "24px"}

設(shè)置單個(gè)樣式可以：

$("div").css("color", "red")

設(shè)置多個(gè)樣式可以：

$("div").css({"color": "red", "font-size": "26px"})

顯示和隱藏元素

貌似通過(guò) css("display", "none") 就可以達(dá)到隱藏元素的效果，但是 jQuery 提供了一種更聰明的方法 hide 來(lái)給我們使用，之所以說(shuō)它更聰明，是因?yàn)?hide 方法會(huì)記住元素在隱藏前 display 的值，這樣再使用 show 方法時(shí)就可以恢復(fù)原本的 display 值。

click me

jQuery 代碼如下：

  $("span").click(function() {
    $(this).hide();
  });

  $("button").click(function() {
    $("span").show();
  });

將 span 的 display 值設(shè)為 block，所以表現(xiàn)為：

點(diǎn)擊 span 后，span 消失：

點(diǎn)擊 button 后，span 再次顯示：

且此時(shí)的 display 值仍為 block。

參考

http://book.douban.com/subject/24669823/

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

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

相關(guān)文章

細(xì)說(shuō) jQuery 事件篇（二） - 處理簡(jiǎn)單事件

摘要：我們可以利用可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來(lái)說(shuō)明。其他類(lèi)似的操作事件都可以通過(guò)這個(gè)方法，將處理事件的程序綁定到同名事件上面。我們可以利用 jQuery 可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來(lái)說(shuō)明。增添樣式基于用戶的事件，對(duì)特定的 DOM 元素樣式進(jìn)行轉(zhuǎn)換是 jQuery 處理事件中比較常見(jiàn)的情形，舉例說(shuō)明，當(dāng)用戶點(diǎn)擊輸入框后，會(huì)增添 highli...

ckllj 2019-08-19 14:51 評(píng)論0 收藏0
細(xì)說(shuō) jQuery 樣式篇（二） - 動(dòng)畫(huà)效果

摘要：創(chuàng)建一個(gè)有背景色的添加方法如下當(dāng)頁(yè)面載入后，會(huì)逐漸消失，動(dòng)畫(huà)效果如同直接使用方法。動(dòng)畫(huà)并發(fā)效果當(dāng)對(duì)多個(gè)元素應(yīng)用動(dòng)畫(huà)效果時(shí)，這些效果是同時(shí)發(fā)生的，即并發(fā)的。除了使用 jQuery 內(nèi)置的 hide,show,toggle 等方法來(lái)展現(xiàn)效果，還可以使用更為強(qiáng)大的 animate 方法來(lái)展現(xiàn)動(dòng)畫(huà)效果。創(chuàng)建一個(gè)有背景色的 div： div { width: 100px; hei...

PiscesYE 2019-08-19 14:53 評(píng)論0 收藏0
細(xì)說(shuō) jQuery DOM操作篇（二） - DOM 樹(shù)操作

摘要：此時(shí)，點(diǎn)擊新建的將會(huì)觸發(fā)。設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容方法同理。我們知道通過(guò) $() 函數(shù)可以訪問(wèn)文檔中的元素，并返回一個(gè) jQuery 對(duì)象，并且通過(guò)一系列方法，我們可以修改元素的樣式和內(nèi)容，實(shí)際上，我們還可以通過(guò)該函數(shù)做更多的事情，例如添加、刪除、復(fù)制等操作來(lái)改變 DOM 樹(shù)的結(jié)構(gòu)。創(chuàng)建元素我們可以通過(guò) $() ...

Anchorer 2019-08-21 12:20 評(píng)論0 收藏0
細(xì)說(shuō) jQuery 事件篇（四） - 改變事件過(guò)程

摘要：事件對(duì)象是一種結(jié)構(gòu)，它會(huì)在元素獲得處理事件的機(jī)會(huì)時(shí)傳遞給調(diào)用的事件處理程序。事件對(duì)象的屬性指的是事件目標(biāo)，它將保存發(fā)生事件的目標(biāo)元素。所以，接下來(lái)我們就要想辦法改變事件過(guò)程來(lái)阻止這個(gè)行為。在《細(xì)說(shuō) jQuery 事件篇（三） - 事件傳播》中提到了事件冒泡可能造成的弊端，當(dāng)時(shí)舉了 mouseout 的例子，對(duì)于 mouseout 這個(gè)特殊情況，我們可以用 hover 方法來(lái)解決，...

nifhlheimr 2019-08-19 14:53 評(píng)論0 收藏0
細(xì)說(shuō) jQuery 事件篇（五） - 事件的移除和重綁定

摘要：一種做法是在事件處理程序中使用條件語(yǔ)句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。事件重綁定我們添加一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕后，所有的事件的處理程序又被重新綁定回來(lái)。如果我們需要移除已經(jīng)注冊(cè)的事件處理程序，使某些處理程序失效。一種做法是在事件處理程序中使用條件語(yǔ)句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。移除處理程序假設(shè)有個(gè) div 和 button，當(dāng)我們點(diǎn)擊...

boredream 2019-08-19 14:53 評(píng)論0 收藏0