首頁 > web前端 > js教程 > jquery怎樣給元素增加classname

jquery怎樣給元素增加classname

WBOY
發布: 2021-11-23 09:34:00
原創
3667 人瀏覽過

jquery為元素增加classname的方法:1、利用利用「$(元素)」語句來匹配元素物件;2、利用addClass()方法將classname,語法為「元素物件.addClass( "要新增的classname")」。

jquery怎樣給元素增加classname

本教學操作環境:windows7系統、jquery1.10.0版本、Dell G3電腦。

jquery怎麼可以為元素增加classname

1、新建一個html頁面,然後在html頁面上新增一個帶有文字

和一個點擊事件按鈕,然後在按鈕上新增一個點擊事件。

html程式碼:

<div id="add">点击按钮添加class</div>
<input type="button" value="添加class" onclick="addBtn()" />
登入後複製

新增class類別的樣式。在標籤後面建立一個<style>標籤,然後給該標籤設定一個字體大小的樣式類別。 </p><p>css程式碼: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><style> .fs40{ font-size: 40px; } </style></pre><div class="contentsignin">登入後複製</div></div><p>2、引入jquery函式庫。在<style>標籤後面引入一個jquery庫。建立<scritp>標籤,在該標籤裡使用 addClass()方法為<div>標籤新增class類別。 </p><p>js程式碼:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript"> function addBtn(){ $("#add").addClass("fs40") } </script></pre><div class="contentsignin">登入後複製</div></div><p>儲存html程式碼頁面,然後使用瀏覽器打開,點擊按鈕圖標,即可看到<div>標籤的字體變大,表示添加class成功。 </p><p>頁面所有程式碼。可以直接複製所有程式碼,貼上到新html頁面,修改jquery庫引入路徑,儲存html程式碼使用瀏覽器打開,點擊按鈕即可看到效果。 </p><p>所有程式碼:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> <style> .fs40{ font-size: 40px; } </style> <script type="text/javascript"> function addBtn(){ $("#add").addClass("fs40") } </script>

<div id="add">点击按钮添加class</div> <input type="button" value="添加class" onclick="addBtn()" />
登入後複製

輸出結果:

jquery怎樣給元素增加classname

#相關影片教學推薦:jQuery影片教學

以上是jquery怎樣給元素增加classname的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板