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)于頁(yè)面焦點(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-04
jQuery基于BootStrap樣式實(shí)現(xiàn)無(wú)限極地區(qū)聯(lián)動(dòng)
這篇文章主要介紹了jQuery基于BootStrap樣式實(shí)現(xiàn)無(wú)限極地區(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-01
jQuery基于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-02
jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫(xiě)法
本篇文章主要是對(duì)jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫(xiě)法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
jquery心形點(diǎn)贊關(guān)注效果的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jquery心形點(diǎn)贊關(guān)注效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
jQuery下通過(guò)replace字符串替換實(shí)現(xiàn)大小圖片切換
實(shí)現(xiàn)的效果有點(diǎn)類似于Google picasa相冊(cè)不同尺寸圖片的切換效果。本實(shí)例通過(guò)文字大?。╢ont-size)控制圖片尺寸的做法是跟Google學(xué)習(xí)的,但是jQuery代碼是根據(jù)效果自己想出來(lái)的,邏輯很簡(jiǎn)單,沒(méi)有什么精妙之處2012-05-05
jQuery mobile在頁(yè)面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序
這篇文章主要介紹了jQuery mobile在頁(yè)面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序比較,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07

