jQuery的css()方法用法实例
更新时间：2014年12月24日 08:55:23 投稿：shichen2014
这篇文章主要介绍了jQuery的css()方法用法,以实例形式较为详细的分析了css()方法的几种常见用法,具有一定的参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery的css()方法用法。分享给大家供大家参考。具体分析如下：
此方法返回或设置匹配元素的一个或多个样式属性。
语法结构:
语法一:
取得指定样式属性的属性值。
以样式属性名称作为参数。例如:
复制代码 代码如下:
$("div").css("color")
以上代码能够获取div的字体颜色值。
代码实例:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>css()函数-脚本之家</title>
<style type="text/css">
div{
color:blue;
background-color:green;
width:300px;
height:300px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($("div").css("color"));
})
})
</script>
</head>
<body>
<div>脚本之家</div>
<button>点击查看效果</button>
</body>
</html>
此处点击按钮可以弹出给div设置的字体颜色值。
语法二:
为所有匹配元素设置一个样式属性值。例如:
复制代码 代码如下:
$("div").css("color","red")
以上代码可以把所有div的字体颜色设置为红色，大家要注意书写格式，属性名称和属性值要用银行包裹，中间用逗号分割。如果属性值是数字的话可以去掉引号，例如:
复制代码 代码如下:
$("div").css("font-size",20)
实例代码:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>css()函数-脚本之家</title>
<style type="text/css">
div{
color:blue;
background-color:green;
width:100px;
height:100px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").css("color","red");
$("div").css("font-size",20);
})
})
</script>
</head>
<body>
<div>仔细查看变化</div>
<div>仔细查看变化</div>
<button>点击查看效果</button>
</body>
</html>
以上代码中，点击按钮可以将div中的文本颜色设置为红色。
语法三:
利用“属性名/值”对象设置为所有匹配元素的样式属性。例如:
复制代码 代码如下:
$("div").css({color:"red"})
以上代码可以把所有div元素的字体颜色设置为红色。使用“属性名/值”对象方式也可以一次性为匹配元素设置多组属性。例如:
复制代码 代码如下:
$("div").css({color:"red",fontSize:20})
以上代码能够将div中的字体颜色和大小分别设置为红色和20px，设置字体大小时候不带单位默认单位是px。大家要注意格式，这个时候属性名称不能用引号包裹，属性值需要用引号包裹，但是如果属性值是数字可以省略引号。特别注意是，font-size和background-color这样的属性名称，中间要去掉中横杠（-），同时第二个单词首字母要大写，例如font-size要写成fontSize，backgroun-color要写成backgroundColor。
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>css()函数-脚本之家</title>
<style type="text/css">
div{
color:blue;
background-color:green;
width:100px;
height:100px;
margin-top:5px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").css({color:"red",fontSize:20,backgroundColor:"blue"});
})
});
</script>
</head>
<body>
<div>仔细查看变化</div>
<div>仔细查看变化</div>
<button>点击查看效果</button>
</body>
</html>
以上代码中，点击按钮可以修改div中的文本颜色和字体大小。
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了判断浏览器的内核及版本号方法汇总,需要的朋友可以参考下2015-01-01
Jquery练习之表单验证实现代码，学习jquery的朋友可以参考下。2010-12-12
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
相信大家喜欢这个界面无非也是喜欢它的动态磁贴。刚好今天研究了一下如何通过JQuery在网页上模仿这种效果，就贴出来给大家喷一下。虽然是一些很低级的技术，但是也希望有需要的朋友可以参考下2013-07-07
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Jquery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法，本文给大家介绍Jquery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法。感兴趣的朋友可以参考下2015-10-10
图片滚动效果想必大家都已司空见惯了吧，接下来本文介绍下jQuery+CSS实现图片滚动，感兴趣的你可不要错过了哈，希望可以帮助到你2013-03-03
这篇文章主要介绍了jQuery通过deferred对象管理ajax异步的相关资料,需要的朋友可以参考下2016-05-05
javascript截图 jQuery插件imgAreaSelect使用详解
这篇文章主要介绍了avascript截图 jQuery插件imgAreaSelect使用详解,需要的朋友可以参考下2016-05-05
各浏览器中querySelector和querySelectorAll的实现差异分析
querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)2012-05-05
那些年学习了一些基本的web开发知识，其中已经有javascript语言了，为什么还要学习Jquery啊2012-03-03
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
这篇文章主要介绍了jQuery的Ajax用户认证和注册技术,结合完整实例较为详细的分析讲解了jQuery中ajax方法实现用户验证与注册的相关技巧与注意事项,并附带了demo源码供读者下载,需要的朋友可以参考下2015-12-12
最新评论