Help Me With css() method_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-18 02:59 出处：网络

So, I am trying to change background of two input fields after the document loads. I use this jquery code:

相关专题：jquery

So, I am trying to change background of two input fields after the document loads. I use this jquery code:

$(document).ready(function() {

    $('#login').css('background', "url('login-bg.gif') 3em center no-repeat");
    $('#password').css('background', "url('password-bg.gif') 3em center no-repeat");

});

I have looked at the code in the Firebug and it seems alright. However, the input fields don't change their background.

开发者_Go百科

If I just set their background in the stylesheet it works (I want to do it with jquery though because I want to change the background of the fields after various events take place).

I think you need to use

css("background-image", "url(login-bg.gif)");
css("background-position", "3em center");
css("background-repeat", "no-repeat");

OR rather

css( { "background-image"    : "url(login-bg.gif)",
       "background-position" : "3em center", 
       "background-repeat"   : "no-repeat"
     }
);

First sentence on the docs page

"Shorthand CSS properties (e.g. margin, background, border) are not supported."

ALSO the path to the image should not be quoted.

The images should be in the same path as your page.

I tested the below code in both FF 3.5.7 and IE 7 and it seems to work. Sure you check already...but typo somewhere?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Test</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" /></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#login').css('background', "url('login-bg.gif') 3em center no-repeat");
                $('#password').css('background', "url('password-bg.gif') 3em center no-repeat");
            });
        </script>
    </head>

    <body style="font-family: Verdana; font-size: 0.8em; margin: 3em; background-color: #f1f1f1;">

    <div><input id="login" type="text" /></div>

    <br />

    <div><input id="password" type="text" /></div>

    </body>

</html>