JQUERY设置和获取以及修改CLASS NAME值操作

<p>在Web程序开发中、很多时候会用需要修改Html标签的class名称、来达到修改标签样式的效果、那么在代码中一般是怎么操作的呢、本文将为你详细讲解一下class的使用、在jQuery中可以使用attr()方法修改&rdquo;class&rdquo;属性、也可以用addClass()、removeClass()、toggleClass()、hasClass()以及css()方法来完成</p> <p>1、JAVASCRIPT ADDCLASS</p> <p>利用document.getElementById(&quot;XX&quot;)找到document对象、然后再通过addClass(&quot;xxx&quot;)修改其class值<br /> document.getElementById(&quot;XX&quot;).addClass(&quot;xxx&quot;);</p> <p>2、ADDCLASS()</p> <p>addClass()方法向匹配的元素增加指定的类名(一个或多个)、注意对于元素来说、class属性可以有多个值、该方法不会移除已经存在的值、而是在原有的基础上追加一个或多个class属性<br /> $(&quot;.XX&quot;).addClass(&quot;xxx&quot;);</p> <p>3、REMOVECLASS()</p> <p>removeClass()方法从被选元素移除一个或多个类、如需移除若干类、用空格来分隔类名、如果没有传参数、该方法将会移除被选元素的所有类<br /> $(&quot;.XX&quot;).removeClass(&quot;xxx&quot;);</p> <p>4、TOGGLECLASS()</p> <p>toggleClass()方法对被选元素的一个或多个类进行切换(设置或移除)、该方法检查每个元素中的指定类、如果存在则删除、如果不存在则添加、通过添加参数,可以设置只进行删除或者只进行添加操作、switch值为true时、只添加、为false时、只删除<br /> $(&quot;.XX&quot;).toggleClass(&quot;xxx&quot;,switch);</p> <p>5、HASCLASS()</p> <p>hasClass()方法检查被选元素是否包含指定的class、还可以用is()方法实现同样的功能、方法参数传入一个选择器字符串、比如&rdquo;.className&rdquo;<br /> $(&quot;.XX&quot;).hasClass(&quot;xxx&quot;);</p> <p>6、CSS()</p> <p>读操作:获取匹配元素集合中第一个元素的指定样式值(一个或多个)、读取多个样式值的操作是在jQuery v1.9才加入的<br /> 写操作: 为匹配元素集合中的每一个元素设置一个或多个CSS属性的值、传入的参数可以是单个的键值对、也可以是PlainObject指定的多个值<br /> $(&quot;.XX&quot;).css(&quot;color&quot;,&quot;red&quot;);</p> <p>7、ATTR()</p> <p>attr()方法设置或返回被选元素的属性值、根据该方法不同的参数、其工作方式也有所差异<br /> $(&quot;.XX&quot;).attr(&quot;class&quot;,&quot;xxx&quot;);<br /> jQuery会处理各个浏览器中不太相同的一些具体情况、比如W3C的cssFloat在IE中是styleFloat、在jQuery中、你可以使用float、然后jQuery会帮你把它翻译成每个浏览器中应该有的正确名称、还有、jQuery会合理解读CSS和DOM格式的多词属性、比如.css(&ldquo;background-color&rdquo;)和.css(&ldquo;backgroundColor&rdquo;)、它都是可以处理的</p> <ul class="list" > <li 0px="" 4px="" images="" > <p ></p> </li> </ul>
RangeTime:0.005697s
RangeMem:207.57 KB
返回顶部 留言