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 相关文章推荐
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 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
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
python的链表基础知识点
2020/09/13 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
商铺租赁意向书
2014/04/01 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技