Help Me With css() method
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>
- Make sure the image paths are right
- Remove the single quotes inside the CSS
urlstyle, i.e.url(login-bg.gif)
加载中,请稍侯......
精彩评论