DIGIT-ARC read-only archive · snapshot: July 23, 2026

DIGIT-ARC / Software / Programming

changing the background of element on the fly using javascript

7 posts · originally from https://geek.digit.in/community/threads/changing-the-background-of-element-on-the-fly-using-javascript.107471/

Sridhar_Rao
Sridhar_Rao Original post #1
Jan 27, 2009 at 9:34 PM
Hello,

I wish to change the background color plus the text color of a form element on the fly using javascript. When click on a link, not only the focus should be on the element but the background colour and font colour too should change.

I experimented using getElementById property and it worked well in firefox and chrome but not in IE 7.

How can this be done?
victor_rambo
victor_rambo #2
Jan 27, 2009 at 11:05 PM
In the status bar, near the left corner it may be hinting towards some error. Check it out!
kapsicum
kapsicum #3
Jan 28, 2009 at 1:32 PM
its better if u could show the code ...

well you can do in following way :

1. Create a new style class which may be something like this :

Code: 
.newClass {
	background-color: #003399;
	color: #FFFFFF;
}

2. Add a javascript function something like this :

Code: 
function changeClass(element) {
	var elementObj = document.getElementById(element);
	elementObj.focus();
	elementObj.className = 'newClass';
}

3. Call the function onClick of an element something like this :
Code: 
<a href="javascript:void(0);" onClick="javscript: changeClass('formElementId');" >Sometext</a>
Sridhar_Rao
Sridhar_Rao #4
Feb 2, 2009 at 8:07 PM
Thanks a lot Kapsicum, this is exactly what I was looking for.
pr.itdude
pr.itdude #5
Feb 2, 2009 at 8:36 PM
hey i too need someones help.....

actually i need a code/javascript so that whenever user opens the page of my blog (blogspot), and if the user's screen resolution is 600x800 pixels then the horizontal scroll bar (below) of the window, comes in the middle. And if the screen resolution is 1024x768 pixels or more then the page should open normally i.e., this code then should not be executed.!!

Thnx. waiting eagerly of some help!!
kapsicum
kapsicum #6
Feb 4, 2009 at 5:13 PM
pr.itdude said:
hey i too need someones help.....

actually i need a code/javascript so that whenever user opens the page of my blog (blogspot), and if the user's screen resolution is 600x800 pixels then the horizontal scroll bar (below) of the window, comes in the middle. And if the screen resolution is 1024x768 pixels or more then the page should open normally i.e., this code then should not be executed.!!

Thnx. waiting eagerly of some help!!
Click to expand...

cant imagine y do u want to do dat but try the following :

Code: 
<script type="text/javascript"> 
function moveHorizontalScroll() {
	if(screen.width == 800 && screen.height == 600) //check for users Screen Resolution
	{
		var browserWidth ,browserHeight;
		//get the Browser's Inner Dimentions 
		if(window.innerHeight || window.innerWidth) {  // FF, Chrome, Safari
			browserWidth = window.innerWidth;
			browserHeight = window.innerHeight;
		}
		else { // IE
			browserWidth = document.documentElement.clientWidth;
			browserHeight = document.documentElement.clientHeight;
		}
		var midPos = Math.round(browserWidth / 2); // set to half of the browser's inner width .... change as u feel the need
		window.scroll(midPos,0); // Horizontal ,Vertical scroll position in pixels
	}
}
</script>

then call the function on body onload as follows :

Code: 
<body onload="moveHorizontalScroll()">
pr.itdude
pr.itdude #7
Feb 4, 2009 at 7:48 PM
thnx ^^.......
actually its the template of my blog which forced me to do this........