溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么在jquery中設置css樣式，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
使用css()方法設置css樣式
css() 方法為被選元素設置一個或多個樣式屬性。
語法如下：
一個樣式：css(屬性名,值);
多個樣式：css({屬性名1:值1,屬性名2:值2...})
示例：使用css()方法設置css屬性。
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"red","font-size":"200%"});
});
});
</script>
</head>
<body>
<h3>注意字體和背景色的變化<h3>
<p>注意字體和背景色的變化</p>
<p>注意字體和背景色的變化</p>
<button type="button">點擊我觀察變化</button>
</body>
</html>與樣式類別有關的方法
可以通過class指定HTML元素的類別。jquery中與CSS類別有關的方法。
1.addClass()方法：為匹配的HTML元素添加類別屬性。
語法：addClass(classname) ，classname為要添加的類別名稱。
2.hasClass()方法：可以判斷匹配的元素是否被擁有指定的類別。
語法：hasClass(classname)
如果匹配的元素擁有名為classname的類別，則hasClass()方法返回True;否則返回False。
3.removeClass()方法：為匹配的HTML元素刪除指定的class屬性。也就是執行切換操作。
語法：removeClass(classname)，classname是要切換的類別名稱
4.toggleClass()方法：檢查每個元素中指定的類。如果不存在則添加類，如果已設置則將其刪除。
語法：toggleClass(classname)，classname是要切換的類別名稱
示例：使用addClass()方法為HTML元素添加class屬性的實例。
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
p{
margin:8px;
font-size:16px;
}
.selected{
color:red;
}
.highlight{
background:yellow;
}
</style>
</head>
<body>
<p>注意我的變化</p>
<button type="button" id="addClass">添加樣式</button>
<button type="button" id="removeClass">刪除樣式</button>
<script type="text/javascript">
$("#addClass").click(function(){
$("p").addClass("selected highlight");
});
$("#removeClass").click(function(){
$("p").removeClass("selected highlight");
});
</script>獲取和設置HTML元素的尺寸
1.height()方法：獲取和設置元素的高度。語法如下：
獲取高度的語法：value=height();
設置高度的語法：height(value);
2.innerHeight()方法：獲取元素的高度（包括頂部和底部的內邊框）。
語法：value=innerHeight();
3.innerWidth()方法：獲取元素的寬度（包括左側和右側的內邊距）。
語法：value=innerWidth();
4.outerHeight()方法：獲取元素的高度（包括頂部和底部的內邊框、邊框和外邊距）。
語法：value=outerHeight();
5.outerWidth()方法：獲取元素的寬度（包括左側和右側的內邊距、邊框和外邊距）。
語法：value=outerWidth();
6.width()方法：獲取和設置元素的寬度。語法如下：
獲取寬度的語法：value=width();
設置寬度的語法：width(value);
示例：獲取html元素高度的實例。
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
button{
font-size:12px;
margin:2px;
}
p{
width:150px;
border:1px red solid;
}
div{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<button id="getp">獲取段落尺寸</button>
<button id="getd">獲取文檔尺寸</button>
<button id="getw">獲取窗口尺寸</button>
<div> </div>
<p>用于測試尺寸的段落。</p>
<script>
function showHeight(ele,h){
$("div").text(ele+"的高度為"+h+"px.");
}
$("#getp").click(function(){
showHeight("段落",$("p").height());
});
$("#getd").click(function(){
showHeight("文檔",$(document).height());
});
$("#getw").click(function(){
showHeight("窗口",$(window).height());
});
</script>
</body>
</html>以上就是怎么在jquery中設置css樣式，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
