当前位置:首页 > 生活百科

jquery修改style样式的某个属性(jquery添加属性的方法)

栏目:生活百科日期:2025-01-14浏览:0

js插件jquery可以很方便的对HTML的元素进行操作,比如一些元素的显示与隐藏,一些元素的动态效果等,今天就说一说通过jquery获取p元素的CSS属性,以及设置p元素的CSS属性的方法。

jquery获取p元素的CSS属性值

jq获取p元素的属性值,可以使用css()方法

例:利用jquery获取p元素的宽

&<!DOCTYPE html&>&<html&>&<head&> &<title&>Document&</title&> &<style&> #mochu{ margin: 10px; padding: 10px; color: red; height: 30px; width: 40px; } &</style&> &<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"&>&</script&>&</head&>&<body&> &<p id="mochu"&>飞鸟慕鱼博客&<br/&>http://www.feiniaomy.com&</p&> &<script&> var h = $('#mochu').css('width'); console.log(h); &</script&>&</body&>&</html&>

打印结果:

40px

例:利用jquery获取p元素的高

&<!DOCTYPE html&>&<html&>&<head&> &<title&>Document&</title&> &<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"&>&</script&>&</head&>&<body&> &<p id="mochu"&>飞鸟慕鱼博客&<br/&>http://www.feiniaomy.com&</p&> &<script&> var h = $('#mochu').css('height'); console.log(h); &</script&>&</body&>&</html&>

打印结果:

42px

注意:

1、如果给p元素定义了CSS属性的值,则直接输出定义的CSS值

2、如果未定义p元素的CSS属性值,则输出浏览器渲染后p的默认值

利用jquery设置p元素的值

在JQ中可以通过CSS方法获取p元素的CSS属性值,也可以设置或改变元素的CSS属性值

例:利用jq改变字体的颜色

&<!DOCTYPE html&>&<html&>&<head&> &<title&>Document&</title&> &<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"&>&</script&>&</head&>&<body&> &<p id="mochu"&>飞鸟慕鱼博客&<br/&>http://www.feiniaomy.com&</p&> &<script&> $('#mochu').css('color','red'); &</script&>&</body&>&</html&>

结果如图:

注:改变p中字体的颜色其实就是给这个p加入了一个 color 的CSS属性,并把属性值设置成 red(红色)

在浏览器中查看元素就可以发现加入的CSS属性

例:给p元素加入多个CSS属性

&<!DOCTYPE html&>&<html&>&<head&> &<title&>Document&</title&> &<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"&>&</script&>&</head&>&<body&> &<p id="mochu"&>飞鸟慕鱼博客&<br/&>http://www.feiniaomy.com&</p&> &<script&> $('#mochu').css({'color':'red','heigth':'40px','width':'40px'}); &</script&>&</body&>&</html&>

在浏览器中审核元素,如下图

可以发现,对过JQ设置的CSS属性都写到了p上

注意:利用JQ的CSS()方法设置或添加多个CSS属性的时候,要以{&”:&”,&”:&”}这种数据格式写入。

“jquery修改style样式的某个属性(jquery添加属性的方法)” 的相关文章

js复选框全选反选(js获取checkbox是否选中)

checkbox复选框与上一章讲的radio单选框的属性相似,表现在:1、可以通过color属性来修改颜色;2、需搭配checkbox-group一起使用。ch...

华为nova3配置参数详情(全方面了解华为nova3手机)

从第一代的“美好触手可及”开始,华为就针对年轻人“爱美”的特质,开启了时尚之路。而在经过几代产品对市场的渗透后,华为nova系列在消费者中有了更深的认知。距离上...

如何编辑pdf格式文件,编辑pdf文件的三种方法

大家都知道因为pdf文件不直能接编辑,所以想要在pdf文档中选取部分段落也是不容易的,下面小编教给大家一个简单的方法,可以轻松选取pdf段落并编辑。许多人都望能...

excel拆分单元格快捷键是哪个(excel拆分窗口快捷键)

上一篇文章介绍了excel如何快速合并多个单元格并填充内容,很多网上都反馈太实用了。又有小伙伴问有没有方法可以快速拆分单元格内容的,一个个输入实在太麻烦了。这当...

在家怎么用电脑挣钱(电脑兼职赚钱的方法)

说到游戏搬砖,很多人都会想到这些&&#8221;鼻祖&&#8221;们:DNF、梦幻西游、魔兽世界等,在端游搬砖的黄金时期,靠着倒卖游戏装备几年就赚取一套海景房...

国外有哪些可以看电影的网站,推荐5个真正免费库存多的

互联网时代,最不缺的就是网络资源,你还在为追剧而烦恼吗?你还为在没钱或者没时间去电影院而发愁吗?福利来了,你准备好了吗?我们一起来看看。1、《左手吃斋影视》左手...

好用的游戏加速器推荐(手游加速器排行榜)

随着游戏更新换代,对于手机硬件设备的需求也是越来越高。例如:我们以前手机可以带的动手游,但是随着手游不断更新优化,对于手机硬件配置刚需也是慢慢地提高。这样低配置...

mysql解析json数组怎么解析(mysql json数组查询)

来源于网络,只是收集方便以后查找!从mysql5.7开始支持json字段类型,sqlserver2016版本开始支持json字段,这是一种非常好用的格式!对记录...

产品用户行为分析怎么写(4个方面写好用户行为分析)

商业模式发展至今,已经不仅仅是销售能够制造的产品,而是制造能够销售的产品。企业的业务一定建立在有某种需求的用户上,所以市场拓张的落脚点都会落到用户的行为分析上。...

partition magic进行分区(1分钟教你windows下调整分区

一、Linux发行版的基本知识虽然Linux的基础是其内核(kernel),但是光有内核还远不是一个完整可用的操作系统环境。这里我们要讲述一些关于Linux发行...