jquery怎麼動態修改css樣式

jquery動態修改css樣式的方法：1、透過css方法動態修改css樣式；2、給指定的html元素設定一個CSS樣式；3、查看元素的css樣式；4、隱藏與顯示p或指定的其他html元素。

本文操作環境：windows7系統、jquery3.2.1版、Dell G3電腦。

jquery實作動態改變css樣式的方法。

具體如下：

jquery 幾乎成了現在開發WEB應用的標準JS函式庫，這與其簡單性和易用性是分不開的。身為後端開發人員，要做一些前端頁面時，CSS 樣式的控制是少不了需要掌握的。如果是靜態的CSS，當然是可以直接寫上去的，但有些介面是需要一些動態效果的，例如顏色變化，字體大小變化，甚至p 的隱藏於現實等，這些都需要用javascript 動態控制其CSS樣式，下面就常用的jquery 控制css 樣式的方法做一個小結.

1. 改變超級連結的樣式
2. 給指定的html元素給一個指定的CSS 樣式
3. 看元素的css樣式
4.隱藏與顯示p或指定的其他html元素

一、改變超級連結的樣式

$("#mylink a").css('color','#111111');
//这里选择器‘$("#mylink a")'表示ID为'#mylink'的元素下的所有链接。
//.css(‘color','#111111');表示把颜色设为'#111111'

二、為指定的html元素指定一個已經定義好的CSS 樣式

1. 你可以在外部css檔案中建立一個css樣式，例如

.mystyle{width:200px;height:100px;}

然後用jquery 賦值

$("#result").css(mystyle);

2. 可以定義一個css物件（也就是javascript物件），然後賦值

var pcss = {
 background: '#EEE',
   width: '478px',
   margin: '10px 0 0',
   padding: '5px 10px',
   border: '1px solid #CCC'
};
$("#result").css(pcss);

這種方式類似於外部連結方式，個人推薦外部連結方式.

三、查看元素的CSS樣式

var mycolor=$("#mylink a").css("color");
if ($('#myp').css('display')=="none"){...}
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

四、隱藏於顯示p或其他元素

1.直接修改CSS方式

$('#myp').attr('style','display:none;');//隐藏
$('#myp').attr('style','display:block;');//显示

推薦學習：《jquery影片教學》

#

以上是jquery怎麼動態修改css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！