jQuery中的样式（七）：addClass()、removeClass()、toggleClass()、hasClass()、css()、width()、height()等

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>样式</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-1.11.3.js"></script><style type="text/css">body{font-family: "Microsoft YaHei"}.cGreen{color: #4CA902}.cPink{color: #ED4A9F}.cBlue{color: #0092E7}.cCyan{color: #01A6A2}.cYellow{color: #DCA112}.cRed{color: #B7103B}.cPurple{color: #792F7C}.cBlack{color: #110F10}.cOrange{color: #FF4500}.cGray{color: #A9A9A9}.hide{display: none;}span {float:left;}ul li {width:120px;float: left;margin-left: 10px;}.fBold{font-weight: bold;}</style><script type="text/javascript">/* addClass(class|fn)：为当前选择节点添加特定样式removeClass(class|fn)：为当前选中节点删除特定样式toggleClass(class|fn)：有就删除，没有就添加hasClass(class|fn)：判断是否存在classcss(name|pro|[,val|fn]))：添加样式width()：无参时查询宽度，有参时修改宽度height()：无参时查询高度，有参时修改高度offset()：查看相对位置，返回值是对象，可以得到left和top属性。*/$(document).ready(function() {// <input type="button" id="btn1" value="addClass()为美国城市添加cOrange类">// 添加样式class选择器：addClass()$("#btn1").click(function() {$("#usa li").addClass("cOrange");});// <input type="button" id="btn2" value="removeClass()为美国城市去除cOrange类">// 删除样式class选择器：removeClass()$("#btn2").click(function() {$("#usa li").removeClass("cOrange");});// <input type="button" id="btn3" value="toggleClass()为美国城市添加或去除cOrange类">// toggleClass()：有就删除，没有就添加！$("#btn3").click(function() {$("#usa li").toggleClass("cOrange");});// <input type="button" id="btn4" value="hasClass()判断是否中国城市(ul元素)是否有fBold类">// hasClass()：判断是否有某个class选择器$("#btn4").click(function() {console.log($("#chn").hasClass("fBold"));});// <input type="button" id="btn5" value="css()将美国的城市字体加粗和颜色设置为蓝色">// css()：添加一段css()$("#btn5").click(function() {$("#usa li").css({"font-weight":"bold", "color":"#0092E7"});});// <input type="button" id="btn6" value="height()查看城市(li元素)的高度并设置高度后再查看设置后值 ">// height()：高度，无参时查询，有参时修改。$("#btn6").click(function() {console.log("原来城市的高度为："+$("ul li").height());$("ul li").height(35);console.log("修改后的城市高度为："+$("ul li").height());});// <input type="button" id="btn7" value="width()查看城市(li元素)的宽度并设置宽度后再查看设置后值">// width()：宽度，无参时查询，有参时修改。$("#btn7").click(function() {console.log("原来城市的宽度为："+$("ul li").width());$("ul li").width(250);console.log("修改后的城市宽度为："+$("ul li").width());});// <input type="button" id="btn8" value="offset()查看广州和洛杉矶的相对位置">// 相对位置：offset()$("#btn8").click(function() {var gzOffset = $("#gz").offset();console.log("广州的 left = "+gzOffset.left+", top = "+gzOffset.top);var laOffset = $("#la").offset();console.log("洛杉矶的 left = "+laOffset.left+", top = "+laOffset.top);});});</script></head><body><span>中国城市</span>：<br><ul id="chn" class="fBold cOrange"><li id="bj">北京</li><li id="sh">上海</li><li id="gz">广州</li><li id="sz">深圳</li><li id="hk">香港</li></ul><br><br><span>美国城市</span>：<br><ul id="usa"><li id="wst">华盛顿特区</li><li id="ny">纽约</li><li id="la">洛杉矶</li><li id="scg">芝加哥</li></ul><br><br><span>德国城市</span>：<br><ul id="ger"><li id="mnh">慕尼黑</li></ul><div style="clear:both;"></div><br><br><hr><input type="button" id="btn1" value="addClass()为美国城市添加cOrange类"><input type="button" id="btn2" value="removeClass()为美国城市去除cOrange类"><input type="button" id="btn3" value="toggleClass()为美国城市添加或去除cOrange类"><input type="button" id="btn4" value="hasClass()判断是否中国城市(ul元素)是否有fBold类"><input type="button" id="btn5" value="css()将美国的城市字体加粗和颜色设置为蓝色"><input type="button" id="btn6" value="height()查看城市(li元素)的高度并设置高度后再查看设置后值 "><input type="button" id="btn7" value="width()查看城市(li元素)的宽度并设置宽度后再查看设置后值"><input type="button" id="btn8" value="offset()查看广州和洛杉矶的相对位置"></body>
</html>

jQuery中的样式（七）：addClass()、removeClass()、toggleClass()、hasClass()、css()、width()、height()等相关推荐

JQuery中的样式操作
通过JavaScript获取dom元素上的style属性,我们可以动态的给元素赋予样式属性.在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了. .css() 方法: ...
jquery中的class函数addClass，removeClass，toggle，hasClass
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery通过class函数操作元素样式 jquery的class函数,包括addClass,removeClas ...
JQuery中的样式切换
在做某些效果的时候,可能会针对同一节点的某一个样式不断的切换,也就是addClass与removeClass的互斥切换,比如隔行换色效果. jQuery提供一个toggleClass方法用于简化这种互 ...
原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
jQuery对类的操作.addClass()/.removeClass()/.hasClass()方法
.addClass():给DOM元素添加类名,间接控制样式 .removeClass():移除DOM元素的样式 .hasClass():判断DOM元素是否有某类名 [例]代码功能:点击换肤.原理:设置 ...
html中font-family样式,详解中文字体在CSS样式中font-family对应的英文名称
宋体:SimSun 黑体:SimHei 微软雅黑:Microsoft YaHei 微软正黑体:Microsoft JhengHei 新宋体:NSimSun 新细明体:PMingLiU 细明体:Ming ...
如何在php中加样式,vue如何给组件加css样式,php中加入css样式
vue如何给组件加css样式哇如何给组件加钢性铸铁样式,某视频剪辑软件给组件加钢性铸铁样式的方法:首先在[.vue]文件中设置相关代码:然后新建[index.js]文件,并建立对应的[record.s ...
JQuery中样式标签的处理
增加样式标签 JQuery中增加样式使用.addClass(className)方法通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当 ...
原生JS中的三大家族（offset/scroll/client）与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...

jQuery中的样式（七）：addClass()、removeClass()、toggleClass()、hasClass()、css()、width()、height()等

jQuery中的样式（七）：addClass()、removeClass()、toggleClass()、hasClass()、css()、width()、height()等相关推荐

最新文章

热门文章