jq怎麼設定css樣式
- 青灯夜游原創
- 2021-04-13 14:40:2215012瀏覽
jquery中可使用css()方法設定css樣式。 css()方法可以為被選元素設定一個或多個樣式屬性；設定單一css樣式可以使用「css(屬性名稱,值);」語句，設定多個樣式可以使用「css({屬性名稱1:值1,屬性名稱2:值2...}」語句。
#本教學操作環境：windows7系統、jquery1.10.0版本、Dell G3電腦。
使用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>
<h2>注意字体和背景色的变化<h2>
<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教學（影片）
以上是jq怎麼設定css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！