jquery 中怎么用css设置background-image

html-css05

jquery 中怎么用css设置background-image,第1张

jquery 中用css设置background-image,我们首先需要的就是获取到你要做这个特效的元素,jquery的话一般是都过$('#元素id'),然后在通过改css来更改这个背景图片,具体我写代码来提现:<html> <head> </head> <script> $(function(){$('#div1').css('background-image','图片地址')})</script> <body> <div id='div1'> <p>我是测试文字</p> </div> </body> </html>这样就实现了,用jquery改变背景图片了。

修改div的位置,其实就是修改div的left和top值。

思路:

先选出div这个对象。

修改div的left和top值。

下面是代码:

<script src="jquery-1.7.2.js"></script>

    <body>

     <div style="width:100px height:100px background:#ccc position:absolute left:100px top:100px" id="div"></div>

    </body>

    <script>

 $('#div').css({'left':'300px','top':'300px'})

    </script>

可以用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>