jQuery使用之（二）设置元素的样式

css是页面不能分隔的部分，jQuery中也提供了一些css相关的实用的办法。前面章节中有使用过 addClass()为元素添加css样式风格。本节主要介绍jQuery如何设置页面的样式风格。包括添加、删除、动态切换等。

1. 添加、删除css类别。

$(function() {//同时添加多个CSS类别$("img").addClass("css1 css2");});

如以上代码对img元素添加了css1和 css2两个样式

removeClass与addClass方法相对应，这里不再重复例举。

2.在类别间动态切换。

很多时候根据用户的操作状态，希望某些元素的样式风格在某个类别之间切换，时而addClass()类别，时而removeClass()类别，Jq提供了一个直接的toggleClass(name)来进行类似的操作。

$(function() {$("p").click(function() {$(this).toggleClass("css1");})});

以上代码实现了点击P元素时，对css1样式不断切换。toggleClass(name)方式只能设定一种css类别。不能对多个css进行切换。

3.直接获取、设置样式。

与attr()方法完全类似，jQuery提供了css()方法直接获取、设置元素的样式风格，比如使用css(name)获取某种样式的风格值。通过css(properties)列表来同事设置多种样式，通过css(name,value)设置元素的某种样式。

例如：通过设置鼠标mouseover和mouseout事件触发css(name,value)来修改颜色标记。

    $(function() {$("p").mouseover(function() {$(this).css("color", "red");});$("p").mouseout(function() {$(this).css("color", "black");});});

css方法提供了opacity属性。并且兼容各种浏览器。

如上例子修改，可以通过鼠标事件设置p元素的透明度值。

    $(function() {$("p").mouseover(function() {$(this).css("opacity", "0.5");});$("p").mouseout(function() {$(this).css("opacity", "1");});});

另外在css中提供了hasClass(name)方法判断某个元素是否设置了某个css类别。返回布尔值。例如:

    $("li:last").hasClass("css1")

表达最后一个li的css属性是否包含css1类。和

    $("li:last").is(".css1")

代码效果完全相同。

查看jQuery源码，hasClass方法就是调运is()方法。

hasClass: function(selector) {return this.is("." + selector);}

转载于:https://www.cnblogs.com/ahthw/p/4232837.html

jQuery使用之（二）设置元素的样式相关推荐

js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式
元素的样式设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器
点击按钮设置某个元素的标签内容 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
CSS（二）元素基础样式、字体属性、文本属性
目录一.元素基础样式 1. 尺寸和单位 2. 颜色 3. 边框 4. 元素的分类 5. 显示和隐藏属性二.字体属性三.文本属性一.元素基础样式 1. 尺寸和单位宽度width和高度heigh ...
jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
用jQuery设置元素的css样式
什么是jQuery ,jQuery 是能用少量的代码写出JavaScript的效果. 学习jQuery 要有一定的JavaScript.CSS.HTML的基础: jQuery 库位于一个 JavaSc ...
怎样设置html的元素属性,Jquery怎么设置元素的属性和样式？
Jquery怎么设置元素的属性和样式?下面本篇文章给大家介绍一下使用jQuery操作元素属性与样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 元素属性和Dom属性对于下 ...
html设置返回的样式,jQuery设置或返回元素样式属性。
jQuery css() 方法css() 方法设置或返回被选元素的一个或多个样式属性. 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); ...
如何通过jQuery动态设置元素CSS的样式，以及HTML中CSS “内联式”、“嵌套式”、“外联式”使用方法
html元素使用CSS渲染标签的样式,可以通过内联式.嵌套式.外联式来将CSS样式添加到html中.有时候涉及到动态的参数,或者在事件中需要修改不同元素的CSS样式时,可以通过js获取目标元素,再其修 ...
2015-07-22 JQuery 第二课（JQ元素获取，添加，删除，判断，遍历，取值，样式设置，改变对象，切换）...
1.获取元素: 1).size(): 获取元素的个数. $("img").size():获取有多少个img. 2).eq():获取元素. $("img[title]&qu ...

jQuery使用之（二）设置元素的样式

jQuery使用之（二）设置元素的样式相关推荐

最新文章

热门文章