Jquery 请帮助我使用css（）方法_Jquery

Jquery 请帮助我使用css（）方法

jquery

Jquery 请帮助我使用css（）方法,jquery,Jquery,因此，我试图在加载文档后更改两个输入字段的背景。我使用以下jquery代码： $(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"); }); 我已经看了Fire

因此，我试图在加载文档后更改两个输入字段的背景。我使用以下jquery代码：

$(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");

});

我已经看了Firebug中的代码，看起来还不错。但是，输入字段不会更改其背景

如果我只是在样式表中设置它们的背景，那么我想使用jquery，因为我想在各种事件发生后更改字段的背景。

图像应该与页面位于同一路径。

我认为您需要使用

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

或者更确切地说

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

关于这个问题的第一句话

不支持简写CSS属性，例如边距、背景、边框

此外，不应引用图像的路径。

我认为您需要使用

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

或者更确切地说

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

关于这个问题的第一句话

不支持简写CSS属性，例如边距、背景、边框

另外，图像的路径也不应该被引用。

我在FF 3.5.7和IE 7中测试了下面的代码，它似乎可以工作。当然你已经查过了…但是在什么地方打字

<!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>

我在FF3.5.7和IE7中测试了下面的代码，它似乎可以工作。当然你已经查过了…但是在什么地方打字

<!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>

确保图像路径正确删除CSS url样式内的单引号，即URLOGIN-bg.gif 确保图像路径正确删除CSS url样式内的单引号，即URLOGIN-bg.gif

是否将样式表、图像和显示的页面保存在同一文件夹中？请尝试使用双引号将选择器和背景或背景图像括起来。jQuery可能在内部处理一些错误，因为引号不匹配。由于在url选项中使用单引号，因此必须对jquery选项使用双引号。但是，url选项不需要引号，因此您可以删除这些单引号。我认为单引号不是必需的，但建议使用。我在大多数在线css教程中都看到它们。样式表、图像和显示的页面是否保留在同一文件夹中？请尝试使用双引号将选择器和背景或背景图像括起来。jQuery可能在内部处理一些错误，因为引号不匹配。由于在url选项中使用单引号，因此必须对jquery选项使用双引号。但是，url选项不需要引号，因此您可以删除这些单引号。我认为单引号不是必需的，但建议使用。我在大多数在线css教程中都能看到它们。