我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

怎么在jquery中设置css样式

本篇文章给大家分享的是有关怎么在jquery中设置css样式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

成都创新互联是网站建设专家,致力于互联网品牌建设与网络营销,专业领域包括网站制作、网站设计、电商网站制作开发、微信小程序开发、微信营销、系统平台开发,与其他网站设计及系统开发公司不同,我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供全方位的互联网品牌整合方案!

使用css()方法设置css样式

css() 方法为被选元素设置一个或多个样式属性。

语法如下:

一个样式:css(属性名,值);

多个样式:css({属性名1:值1,属性名2:值2...})

示例:使用css()方法设置css属性。






$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"red","font-size":"200%"});
});
});



注意字体和背景色的变化

注意字体和背景色的变化

注意字体和背景色的变化

点击我观察变化

与样式类别有关的方法

可以通过class指定HTML元素的类别。jquery中与CSS类别有关的方法。

1.addClass()方法:为匹配的HTML元素添加类别属性。

语法:addClass(classname) ,classname为要添加的类别名称。

2.hasClass()方法:可以判断匹配的元素是否被拥有指定的类别。

语法:hasClass(classname)

如果匹配的元素拥有名为classname的类别,则hasClass()方法返回True;否则返回False。

3.removeClass()方法:为匹配的HTML元素删除指定的class属性。也就是执行切换操作。

语法:removeClass(classname),classname是要切换的类别名称

4.toggleClass()方法:检查每个元素中指定的类。如果不存在则添加类,如果已设置则将其删除。

语法:toggleClass(classname),classname是要切换的类别名称

示例:使用addClass()方法为HTML元素添加class属性的实例。








注意我的变化

添加样式 删除样式 $("#addClass").click(function(){ $("p").addClass("selected highlight"); }); $("#removeClass").click(function(){ $("p").removeClass("selected highlight"); });

获取和设置HTML元素的尺寸

1.height()方法:获取和设置元素的高度。语法如下:

获取高度的语法:value=height();

设置高度的语法:height(value);

2.innerHeight()方法:获取元素的高度(包括顶部和底部的内边框)。

语法:value=innerHeight();

3.innerWidth()方法:获取元素的宽度(包括左侧和右侧的内边距)。

语法:value=innerWidth();

4.outerHeight()方法:获取元素的高度(包括顶部和底部的内边框、边框和外边距)。

语法:value=outerHeight();

5.outerWidth()方法:获取元素的宽度(包括左侧和右侧的内边距、边框和外边距)。

语法:value=outerWidth();

6.width()方法:获取和设置元素的宽度。语法如下:

获取宽度的语法:value=width();

设置宽度的语法:width(value);

示例:获取html元素高度的实例。








获取段落尺寸
获取文档尺寸
获取窗口尺寸
 
 

用于测试尺寸的段落。

以上就是怎么在jquery中设置css样式,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


网站题目:怎么在jquery中设置css样式
网站路径:http://shouzuofang.com/article/jppgid.html

其他资讯