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遮罩层实例讲解
May 11 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery中库的引用方法
Jan 06 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
用python实现批量重命名文件的代码
2012/05/25 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
认识深刻的检讨书
2014/02/16 职场文书
文明市民先进事迹
2014/05/15 职场文书
社区助残日活动总结
2014/08/29 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
企业法人任命书
2015/09/21 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python