jQuery实现获取及设置CSS样式操作详解


Posted in jQuery onSeptember 05, 2018

本文实例讲述了jQuery实现获取及设置CSS样式操作。分享给大家供大家参考,具体如下:

  • addClass():向被选元素添加一个或多个类
  • removeClass():从被选元素删除一个或多个类
  • toggleClass():对被选元素进行添加/删除类的切换操作
  • css():设置或返回被选元素的一个或多个样式属性

样式表实例:

.important{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}

addClass()

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<h1>she is gone</h1>
<h2>no say anymore</h2>
<p>but i miss you</p>
<div>can you come back</div>
</br>
<button>addClass</button>
</body>
</html>

运行效果:

jQuery实现获取及设置CSS样式操作详解

可以在addClass()方法中规定多个类:

$("button").click(function(){
$("#div1").addClass("important blue");
});

removeClass()

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style type="text/css">
.important{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">is she ?</h1>
<h2 class="blue">i do not know</h2>
<p class="blue">queit</p>
<br>
<button>removeClass</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

toggleClass()

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue{
color:blue;
}
</style>
</head>
<body>
<h1>who are you</h1>
<h2> i five thank you</h2>
<p>goodbye</p>
<button>toggleClass</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

css()

返回CSS属性

css("propertyname")

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("#p2").css("background-color"));
});
});
</script>
</head>
<body>
<h2>我心在南朝</h2>
<p id=p1 style="background-color:#ff0000">田野上</p>
<p id=p2 style="background-color:#00ff00">红花盛开</p>
<p id=p3 style="background-color:#0000ff">玲珑剔透</p>
<button>css()</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

设置CSS属性

css("propertyname","value");

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>我心在南朝</h2>
<p style="background-color:#ff0000">田野上</p>
<p style="background-color:#00ff00">红彤彤的花儿</p>
<p style="background-color:#0000ff">玲珑剔透</p>
<p>我心在南朝</p>
<button>设置CSS属性</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

设置多个CSS属性

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery——尺寸

  • width():设置或返回元素的宽度(不包括内边距、边框或外边距)
  • height():设置或返回元素的高度(不包括内边距、边框或外边距)
  • innerWidth()方法返回元素的宽度(包括内边距)
  • innerHeight()方法返回元素的高度(包括内边距)
  • outerWidth()方法返回元素的宽度(包括内边距和边框)
  • outerHeight()方法返回元素的高度(包括内边距和边框)
  • outerWidth(true)方法返回元素的宽度(包括内边距、边框、外边距)
  • outerHeight(true)方法返回元素的高度(包括内边距、边框、外边距)
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="innerWidth of div: " + $("#div1").innerWidth() + "</br>";
txt+="innerHeight of div: " + $("#div1").innerHeight() + "</br>"
txt+="Outer width: " + $("#div1").outerWidth() + "</br>"
txt+="Outter height: " + $("#div1").outerHeight() + "</br>";
txt+="Outer width: " + $("#div1").outerWidth(true) + "</br>"
txt+="Outter height: " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示div尺寸</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
详解jQuery中的easyui
Sep 02 #jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
jQuery解析json格式数据示例
Sep 01 #jQuery
jQuery实现表格隔行换色
Sep 01 #jQuery
You might like
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
基于jQuery试卷自动排版系统
2010/07/18 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python中requests和https使用简单示例
2018/01/18 Python
Python 支付整合开发包的实现
2019/01/23 Python
Pandas中resample方法详解
2019/07/02 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python新手如何理解循环加载模块
2020/05/29 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
物理系毕业生自荐信
2013/11/01 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
财务总经理岗位职责
2014/02/16 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
赔偿协议书
2015/01/27 职场文书
教师自荐信范文
2015/03/06 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android