Jquery使用css方法改變樣式實(shí)例
本文實(shí)例講述了Jquery使用css方法改變樣式。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery css方法</title> <style type="text/css"> div{width:100px;margin:0px auto;border:1px solid red;} </style> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnChangeCss").click(function () { var $divs = $("div"); //返回JQuery對(duì)象,包含兩個(gè)div元素 //----舉例1 //alert("Div 的 Border樣式:" + $divs.css("border-color")); //讀取css樣式 //----舉例2 //$divs.css("backgroundColor", "#ccff66"); //設(shè)置兩個(gè)div元素的背景顏色 //----舉例3 鏈?zhǔn)皆O(shè)置三個(gè)個(gè)css屬性 $divs.css("width","500px").css("background-color", "#ffff00").css("font-size", "88px"); }); }); </script> </head> <body> <input id="btnChangeCss" type="button" value="改變樣式" /> <div id="div1">我是div1</div> <div id="div2">我是div2</div> </body> </html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- Jquery 點(diǎn)擊按鈕顯示和隱藏層的代碼
- JS/jQuery實(shí)現(xiàn)默認(rèn)顯示部分文字點(diǎn)擊按鈕顯示全部?jī)?nèi)容
- JQuery實(shí)現(xiàn)動(dòng)態(tài)表格點(diǎn)擊按鈕表格增加一行
- jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動(dòng)層插件
- jQuery點(diǎn)擊按鈕彈出遮罩層且內(nèi)容居中特效
- jQuery中iframe的操作(點(diǎn)擊按鈕新增窗口)
- jQuery實(shí)現(xiàn)點(diǎn)擊按鈕文字變成input框點(diǎn)擊保存變成文字
- Jquery 點(diǎn)擊按鈕自動(dòng)高亮實(shí)現(xiàn)原理及代碼
- jQuery實(shí)現(xiàn)鼠標(biāo)滾輪動(dòng)態(tài)改變樣式或效果
- jQuery文本框得到與失去焦點(diǎn)動(dòng)態(tài)改變樣式效果
- jquery關(guān)于頁面焦點(diǎn)的定位(文本框獲取焦點(diǎn)時(shí)改變樣式 )
- jQuery實(shí)現(xiàn)的點(diǎn)擊按鈕改變樣式功能示例
相關(guān)文章
jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例,需要的朋友可以參考下2014-04-04jQuery基于BootStrap樣式實(shí)現(xiàn)無限極地區(qū)聯(lián)動(dòng)
這篇文章主要介紹了jQuery基于BootStrap樣式實(shí)現(xiàn)無限極地區(qū)聯(lián)動(dòng)的相關(guān)資料,需要的朋友可以參考下2016-08-08基于jQuery插件jqzoom實(shí)現(xiàn)的圖片放大鏡效果示例
這篇文章主要介紹了基于jQuery插件jqzoom實(shí)現(xiàn)的圖片放大鏡效果,結(jié)合實(shí)例形式分析了jQuery插件jqzoom的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01jQuery基于ajax方式實(shí)現(xiàn)用戶名存在性檢查功能示例
這篇文章主要介紹了jQuery基于ajax方式實(shí)現(xiàn)用戶名存在性檢查功能,結(jié)合實(shí)例形式分析了jQuery前臺(tái)ajax交互及后臺(tái)C#驗(yàn)證操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-02-02jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對(duì)jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02jquery心形點(diǎn)贊關(guān)注效果的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨query心形點(diǎn)贊關(guān)注效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11jQuery下通過replace字符串替換實(shí)現(xiàn)大小圖片切換
實(shí)現(xiàn)的效果有點(diǎn)類似于Google picasa相冊(cè)不同尺寸圖片的切換效果。本實(shí)例通過文字大?。╢ont-size)控制圖片尺寸的做法是跟Google學(xué)習(xí)的,但是jQuery代碼是根據(jù)效果自己想出來的,邏輯很簡(jiǎn)單,沒有什么精妙之處2012-05-05jQuery mobile在頁面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序
這篇文章主要介紹了jQuery mobile在頁面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序比較,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07