jQuery css()方法

快乐打工仔发布于 2年前分类：实例代码

使用此方法可以很方便的设置元素的css样式属性，下面就介绍一下它的用法。

此方法返回或设置匹配的元素的一个或多个样式属性。

设置元素的样式值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#antzone").css("color","red");
});
</script>
</head>
<body>
<div id="antzone">前端教程网</div>
</body>
</html>

上面的代码可以将div中的字体颜色设置为红色。

一次性设置元素多个样式，代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#antzone").css({
    color:"red",
    fontSize:"16px",
    fontWeight:"bold"
  });
});
</script>
</head>
<body>
<div id="antzone">前端教程网</div>
</body>
</html>

上面的代码可以为div一次性设置多个样式属性。

获取样式属性值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#antzone{
  color:red;
  font-size:16px;
  font-weight:bold;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#antzone").text($("#antzone").css("font-size"));
});
</script>
</head>
<body>
<div id="antzone">前端教程网</div>
</body>
</html>

上面的代码可以获取div设置的字体大小。

我来回复

暂无回复内容