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 的宽高背景都设置成自己想要的样式了

注意:在我们写的时候,写完了一个属性需要用逗号结尾,写到最后一个的时候我们可以不加逗号的

继续学习
||
<!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>
提交重置代码