【jquery添加style样式 jquery修改css样式属性】
文章插图
文章插图
js插件jquery可以很方便的对HTML的元素进行操作,比如一些元素的显示与隐藏,一些元素的动态效果等,今天就说一说通过jquery获取DIV元素的CSS属性,以及设置DIV元素的CSS属性的方法 。
jquery获取DIV元素的CSS属性值
jq获取DIV元素的属性值,可以使用css()方法
例:利用jquery获取DIV元素的宽<!DOCTYPE html><html><head> <title>Document</title> <style> #mochu{ margin: 10px; padding: 10px; color: red; height: 30px; width: 40px; } </style> <script src="http://img.hubeilong.com/220623/0Z2451193-1.jpg"></script></head><body> <div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div> <script> var h = $('#mochu').css('width'); console.log(h); </script></body></html>打印结果:
40px
例:利用jquery获取DIV元素的高<!DOCTYPE html><html><head> <title>Document</title> <script src="http://img.hubeilong.com/220623/0Z2451193-1.jpg"></script></head><body> <div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div> <script> var h = $('#mochu').css('height'); console.log(h); </script></body></html>打印结果:
42px注意:
1、如果给DIV元素定义了CSS属性的值,则直接输出定义的CSS值
2、如果未定义DIV元素的CSS属性值,则输出浏览器渲染后DIV的默认值
利用jquery设置DIV元素的值
在JQ中可以通过CSS方法获取DIV元素的CSS属性值,也可以设置或改变元素的CSS属性值
例:利用jq改变字体的颜色<!DOCTYPE html><html><head> <title>Document</title> <script src="http://img.hubeilong.com/220623/0Z2451193-1.jpg"></script></head><body> <div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div> <script> $('#mochu').css('color','red'); </script></body></html>结果如图:
注:改变DIV中字体的颜色其实就是给这个DIV加入了一个 color 的CSS属性,并把属性值设置成 red(红色)
在浏览器中查看元素就可以发现加入的CSS属性
例:给DIV元素加入多个CSS属性<!DOCTYPE html><html><head> <title>Document</title> <script src="http://img.hubeilong.com/220623/0Z2451193-1.jpg"></script></head><body> <div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div> <script> $('#mochu').css({'color':'red','heigth':'40px','width':'40px'}); </script></body></html>在浏览器中审核元素,如下图
可以发现,对过JQ设置的CSS属性都写到了DIV上
注意:利用JQ的CSS()方法设置或添加多个CSS属性的时候,要以{”:”,”:”}这种数据格式写入 。
- 苹果手机电话铃声怎么添加歌曲 苹果手机来电铃声怎么添加歌曲
- 分页符号怎么插 如何添加分页符号
- mac怎么添加字体到word mac怎么添加字体到ai
- linux怎么加载u盘 linux系统添加硬盘
- 宝宝可以吃生菜吗
- jq添加移除css样式 jquery移除style属性
- js数组中添加数组 JS-向数组指定位置添加元素
- 小苏打怎么添加饲料
- 添加剂 纳他霉素是什么添加剂
- 照片上如何添加水印 word如何给图片加水印