jQuery学习（七）jQuery的CSS

来源：互联网发布：spring的切面编程编辑：程序博客网时间：2024/05/20 09:23

JQuery的CSS函数

7.1 jQuery CSS的操作

7.1.1jQuery CSS的操作

jQuery 拥有三种用于 CSS 操作的重要函数：

$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)

7.1.2.css操作实例

函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值：

实例1

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("button").click(function(){

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

});

</script>

</head>

<body>

<h2>This is aheading</h2>

<p>This is aparagraph.</p>

<p>This isanother paragraph.</p>

<buttontype="button">触发</button>

</body>

</html>

函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值：

实例2

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("button").click(function(){

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

});

</script>

</head>

<body>

<buttontype="button">触发</button>

</body>

</html>

函数 css(name) 返回指定的 CSS 属性的值：

实例3

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("div").click(function(){

$("#result").html($(this).css("background-color"));

});

</script>

</head>

<body>

<divstyle="width:100px;height:100px;

background:blue"></div>

<pid="result">请点击绿色框框</p>

</body>

</html>

7.2jQuery Size 操作

7.2.1jQuery Size 操作

jQuery 拥有两种用于尺寸操作的重要函数：

$(selector).height(value)
$(selector).width(value)

7.2.2Size 操作实例

函数 height(value) 设置所有匹配元素的高度

$(selector).height(value)

$("#id100").height("200px");

函数 width(value) 设置所有匹配元素的宽度：

$(selector).width(value)

$("#id200").width("300px");

7.3.常用的css函数

CSS 属性

描述

$(selector).css(name,value)

为匹配元素设置样式属性的值

$(selector).css({properties})

为匹配元素设置多个样式属性

$(selector).css(name)

获得第一个匹配元素的样式属性值

$(selector).height(value)

设置匹配元素的高度

$(selector).width(value)

设置匹配元素的宽度

7.4.jQuery参考手册

CSS 属性

描述

css()

设置或返回匹配元素的样式属性。

height()

设置或返回匹配元素的高度。

offset()

返回第一个匹配元素相对于文档的位置。

offsetParent()

返回最近的定位祖先元素。

position()

返回第一个匹配元素相对于父元素的位置。

scrollLeft()

设置或返回匹配元素相对滚动条左侧的偏移。

scrollTop()

设置或返回匹配元素相对滚动条顶部的偏移。

width()

设置或返回匹配元素的宽度。

（注：以上内容是通过http://www.w3school.com.cn学习，很多内容粘帖下来是为了方便学习）