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 相关文章推荐
js自动下载文件到本地的实现代码
Apr 28 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
uniapp实现横向滚动选择日期
Oct 21 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文件注释标记及规范小结
2012/04/01 PHP
phpize的深入理解
2013/06/03 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
vue观察模式浅析
2018/09/25 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
python单元测试unittest实例详解
2015/05/11 Python
简单介绍Python中的floor()方法
2015/05/15 Python
Python实现的弹球小游戏示例
2017/08/01 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
投标承诺书怎么写
2014/05/24 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
作风转变年心得体会
2014/10/22 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
中学音乐课教学反思
2016/02/18 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技