jQuery的css()方法用法实例


Posted in Javascript onDecember 24, 2014

本文实例讲述了jQuery的css()方法用法。分享给大家供大家参考。具体分析如下:

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

语法结构:

语法一:
取得指定样式属性的属性值。
以样式属性名称作为参数。例如:

$("div").css("color")

以上代码能够获取div的字体颜色值。
代码实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<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://3water.com/" />

<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://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
jQuery的文档处理程序详解
May 10 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
使用javascript获取页面名称
Dec 23 #Javascript
jQuery类选择器用法实例
Dec 23 #Javascript
基于JQuery制作可编辑的表格特效
Dec 23 #Javascript
JavaScript调试工具汇总
Dec 23 #Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 #Javascript
jQuery元素选择器用法实例
Dec 23 #Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
如何通过python检查文件是否被占用
2020/12/18 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
护士辞职信模板
2014/01/20 职场文书
推荐信格式要求
2014/05/09 职场文书
大学生实习证明范本
2014/09/19 职场文书
挂靠协议书
2015/01/27 职场文书
经营场所使用证明
2015/06/19 职场文书