jq怎麼設定css樣式-js教程-PHP中文網

首頁

web前端

js教程

jq怎麼設定css樣式

青灯夜游

Apr 13, 2021 pm 02:40 PM

css樣式jquery

jquery中可使用css()方法設定css樣式。 css()方法可以為被選元素設定一個或多個樣式屬性；設定單一css樣式可以使用「css(屬性名稱,值);」語句，設定多個樣式可以使用「css({屬性名稱1:值1,屬性名稱2:值2...}」語句。

jq怎麼設定css樣式

#本教學操作環境：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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。