js插件jquery可以很方便的对HTML的元素进行操作,比如一些元素的显示与隐藏,一些元素的动态效果等,今天就说一说通过jquery获取DIV元素的CSS属性,以及设置DIV元素的CSS属性的方法。
jquery增加属性值 jquery添加样式的方法
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="/uploads/lazy.png" data-original="">/script> /head> body> div id="mochu">飞鸟慕鱼博客 script> var h = $('#mochu').css('width'); console.log(h); /script> /body> /html>
打印结果:
40px
例:利用jquery获取DIV元素的高
!DOCTYPE html> html> head> title>Document/title> script src="/uploads/lazy.png" data-original="">/script> /head> body> div id="mochu">飞鸟慕鱼博客 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="/uploads/lazy.png" data-original="">/script> /head> body> div id="mochu">飞鸟慕鱼博客 script> $('#mochu').css('color','red'); /script> /body> /html>
结果如图: