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入门知识简介
Mar 04 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
Angular4学习笔记router的简单使用
Mar 30 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
使用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文本操作类
2006/11/25 PHP
php入门教程 精简版
2009/12/13 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
Python实现备份文件实例
2014/09/16 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python字符串循环左移
2019/03/08 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
运动会100米解说词
2014/01/23 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js