首页 前端知识 JQuery-JavaScript代码库-与CSS的联动篇—我耀学IT

JQuery-JavaScript代码库-与CSS的联动篇—我耀学IT

2024-05-03 18:05:13 前端知识 前端哥 498 550 我要收藏

5.1 JQuery - 获取并设置CSS类

JQuery 拥有可操作 HTML 元素和属性的强大方法.

5.1.1 JQuery操作CSS

JQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

*下面的样式表将用于本页的所有例子:*

<style type=”text/css”>
.important { 
    font-weight:bold; 
    font-size:xx-large; 
} 
.blue
{ 
    color:blue; 
}
</style>

5.1.2 JQuery addClass()方法

下面的例子展示如何向不同的元素添加 class 属性。

当然,在添加类时,您也可以选取多个元素:

实例1:

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

也可以在 addClass() 方法中规定多个类:

实例2:

$("button").click(function(){ 
    $("body div:first").addClass("important blue"); 
});

5.1.3 JQuery removeClass()方法

下面的例子演示如何在不同的元素中删除指定的 class 属性:

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

5.1.4 jQuery toggleClass()方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:

实例:

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

案例演示:

<script>
$(document).ready(function(){
     $("button").click(function(){
         $("h1,h2,p").toggleClass("blue");
     });
});
</script>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>

5.2 JQuery - CSS()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

5.2.1 返回CSS属性

如需返回指定的 CSS 属性的值,请使用如下语法:

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值:

实例:

$("p").css("background-color");

5.2.2 设置CSS属性

如需设置指定的 CSS 属性,请使用如下语法:

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值:

实例:

$("p").css("background-color","yellow");

5.2.3 设置多个CSS属性

如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size:

实例:

$("p").css({"background-color":"yellow","font-size":"200%"});

5.3 JQuery 尺寸

通过 jQuery,很容易处理元素和浏览器窗口的尺寸。

5.3.1 JQuery尺寸方法

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

5.3.2 JQuery width()方法和height()方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

下面的例子返回指定的 <div> 元素的宽度和高度:

实例:

$("button").click(function(){ 
var txt=""; 
	txt+="div 的宽度是: " + $("#div1").width() + "</br>"; 
	txt+="div 的高度是: " + $("#div1").height(); 
	$("#div1").html(txt); 
});

<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>

</body>

5.3.3 JQuery innerWidth()和innerHeight()方法

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

下面的例子返回指定的 <div> 元素的 inner-width/height:

实例:

$("button").click(function(){ 
	var txt=""; 
	txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>"; 
	txt+="div 高度,包含内边距: " + $("#div1").innerHeight(); 
	$("#div1").html(txt); 
});

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
<p>innerHeight() - 返回元素的高度 (包含内边距)。</p>

</body>

5.3.4 JQuery outerWidth()和outerHeight()方法

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

下面的例子返回指定的 <div> 元素的 outer-width/height:

实例:

$("button").click(function(){ 
	var txt=""; 
	txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>"; 
	txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight(); 
	$("#div1").html(txt); 
});

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>

</body>

[我耀学IT]  Patience is key in life

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6775.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!