Jquery從入門到放棄（五）

時間 2019-11-17

標籤 jquery 入門放棄欄目 JQuery 简体版

原文原文鏈接

CSS的操做

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操做
css() - 設置或返回樣式屬性

1添加類css

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

2刪除類html

$("button").click(function(){
  $("#div1").addClass("important blue");
});

3切換操做（添加和刪除動做切換進行）jquery

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>標題 1</h1>
<h2>標題 2</h2>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
<button>切換 CSS 類</button>
</body>
</html>

4設置和返回CSSspa

4.1返回 CSS 屬性code

css("propertyname"); //返回指定CSS屬性值

4.2設置CSS屬性htm

$("p").css("background-color");   //設置單個屬性

css({"propertyname":"value","propertyname":"value",...});  //設置多個屬性值

4.3尺寸處理ip

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）
innerWidth() 方法返回元素的寬度（包括內邊距）
innerHeight() 方法返回元素的高度（包括內邊距）
outerWidth()方法返回元素的寬度（包括內邊距、邊框和外邊距）
outerHeight()方法返回元素的高度（包括內邊距、邊框和外邊距）。

咱們來複習一下CSS盒子模型rem

外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）四個屬性io

固然能獲取尺寸大小一定能設置大小function

$("#div1").outerWidth() //獲取大小

$("button").click(function(){  //設置大小
  $("#div1").width(500).height(500);
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。