jquery怎么添加css样式

html-css049

jquery怎么添加css样式,第1张

可以用jquery中的css()方法;

css()有两个参数。第一个参数是必选参数,一般是指css样式中的属性。第二个参数是可选参数,一般是指css样式中属性的值。当只有第一个参数是,则是指获取该属性的值。如果也有第二个参数,那就是表示改变属性的值。

示例如下:

<!doctype html>

<html>

<head>

<meta charset='utf-8' />

<title></title>

<script type="text/javascript" language="javascript" src='jquery.js'></script>

<script language='javascript'>

    $(function(){

        $('#btn1').click(function(){

            //css()为一个参数

            var divWid=$('#div-box').css('width')

            alert(divWid)

        })

        $('#btn2').click(function(){

            //css()为两个参数

            var divWid=$('#div-box').css('background','#00f')

        })

    })

</script>

<style type="text/css">

    #div-box {width:200pxheight:100pxbackground:#f00}

</style>

</head>

 

<body>

<div id="div-box"></div>

<input type='button' id='btn1' value='提取' />

<input type='button' id='btn2' value='改变' />

</body>

</html>

css()方法

获取或设置样式

对以下html标签进行样式的获取和设置

css()方法设置参数,参数为要设置的样式名

可用驼峰命名也可用css命名方式。注意样式名需要加''

点击获取按钮,结果:

但是在IE浏览器里,用 console.log($('#div1').css('border'))可能会不显示或出现undefined。

在IE浏览器中,要获取边框这样的样式值,一定要记得给一个准确的边框值。例如:

console.log($('#div1').css('Border-top-width'))//2px

获取包含了多个DOM元素的jQuery对象的样式,只能获取到第一个DOM对象的样式。例如:

console.log($('div').css('width'))//200px

css(样式名,样式值)

设置的样式是行内样式

单样式里样式名必须在''里,宽高度单位px可不写,这时300可不加'',如果加px,则必须为'300px'

多样式里样式名可不加''。但是 background-color:'green' 这样写报错。

给多个div一起设置样式

隐式迭代,把每一个div都设置了同样的样式

1、jQuery设置css样式

<div style="background-color:#ffffffpadding-left:10px">测试jQuery动态获取padding-left</div>

2、用css()方法返回元素的样式属性

$("div").css("padding-left"))

3、用css()设置样式

$("div").css("color","yellow")

4、设置多个样式

$("div").css({"background-color":"yellow","font-size":"200%"})

var css = {

 background-color: '#EEE',

 height: '500px',

 margin: '10px',

 padding: '2px 5px'  }

$("div").css(css)