...

View Full Version : Javascript/getElementById question



dlg0351
05-29-2006, 07:02 AM
I would like to recreate the following onFocus/onBlur class change using getElementById but I am not sure how to. Can anyone help me? Any help is greatly appreciated.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>

<style>
.search-input-off {
padding: 1px 1px 1px 2px;
font-family: arial, sans serif;
font-size: 11px;
color: #444;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
}
.search-input-on {
padding: 1px 1px 1px 2px;
font-family: arial, sans serif;
font-size: 11px;
color: #444;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
background-color: #FFFFE1;
}
#search-button {
font-family: arial, sans serif;
font-size: 11px;
color: #444;
font-weight: bold;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
background-color: #EEE;
}
</style>
</head>

<body>

<form>
<input type="text" class="search-input-off"
onFocus="className='search-input-on';" onBlur="className='search-input-off';">

<input type="submit" value="Search" id="search-button">
</form>

</body>
</html>

danbopes
05-29-2006, 07:39 AM
This is an example of your script using getElementById


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>

<style>
.search-input-off {
padding: 1px 1px 1px 2px;
font-family: arial, sans serif;
font-size: 11px;
color: #444;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
}
.search-input-on {
padding: 1px 1px 1px 2px;
font-family: arial, sans serif;
font-size: 11px;
color: #444;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
background-color: #FFFFE1;
}
#search-button {
font-family: arial, sans serif;
font-size: 11px;
color: #444;
font-weight: bold;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
background-color: #EEE;
}
</style>
<script type="text/javascript">
function Focus()
{
document.getElementById('text').className = 'search-input-on';
}

function Blur()
{
document.getElementById('text').className = 'search-input-off';
}
</script>

</head>

<body>

<form>
<input type="text" id="text" class="search-input-off"
onFocus="Focus();" onBlur="Blur();">

<input type="submit" value="Search" id="search-button">
</form>

</body>
</html>

Mr J
05-29-2006, 09:00 AM
You could also possibly just add this to the events


<input type="text" class="search-input-off" onFocus="this.className='search-input-on';" onBlur="this.className='search-input-off';">

dlg0351
05-29-2006, 03:55 PM
Thanks!

Is there any benefit to use getElementById in place of this.className?

Mr J
05-29-2006, 04:16 PM
Is there any benefit to use getElementById in place of this.className?
I don't think so in this instance



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum