jQuery 属性与样式(六)
通过JavaScript获取dom元素上的style属性,我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了
css() 方法:获取元素样式属性的计算值或者设置元素的CSS属性
获取:
css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值
css( propertyNames ):传递一组数组,返回一个对象结果
设置:
css(propertyName, value ):设置CSS
css( propertyName, function ):可以传入一个回调函数,返回取到对应的值进行处理
css( properties ):可以传一个对象,同时设置多个样式
注:
浏览器属性获取方式不同,在获取某些值的时候都jQuery采用统一的处理,比如颜色采用RBG,尺寸采用px
css()方法支持驼峰写法与大小写混搭的写法,内部做了容错的处理
当一个数只被作为值(value)的时候, jQuery会将其转换为一个字符串,并添在字符串的结尾处添加px,例如 .css("width",50}) 与 .css("width","50px"})一样
下面我们来看一段代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php 中文网</div> <script> $('div').css('color','red'); </script> </body> </html>
改变div 中内容的样式
下面我们来看一下,如果改变多个样式呢,比如我要给div标签设置一个宽高,或者背景,那应该怎么写呢?
那接下来我们就开始写这样的一段代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php 中文网</div> <script> $("div").css({ width:'200px', height:'200px', background:'#ccc' }); </script> </body> </html>
看上面的代码,我们就可以吧div 的宽高背景都设置成自己想要的样式了
注意:在我们写的时候,写完了一个属性需要用逗号结尾,写到最后一个的时候我们可以不加逗号的