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 Masonry瀑布流布局神器使用详解
May 25 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现动态向上滚动
Dec 21 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
javascript中this的四种用法
2015/05/11 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python实现学生成绩管理系统
2020/04/05 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
详解Python if-elif-else知识点
2018/06/11 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python实现顺时针打印矩阵
2019/03/02 Python
python实现五子棋游戏
2019/06/18 Python
python实现的config文件读写功能示例
2019/09/24 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
写给女朋友的道歉信
2014/01/08 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
应聘教师自荐信
2015/03/26 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
golang 语言中错误处理机制
2021/08/30 Golang