Well, you must have seen this on some website that when you hover over some object which has text or anything written in it the text changes along with the object visualization, How is that happening? What magic is behind that effect? Maybe I might've exaggerated this a little bit but it is no 'biggie'.
These are rather one of the 'cool' properties of JavaScript, if you have enough imagination left in you, you could do some very unique and powerful stuff with these tricks.
Let's get to what this post is originally about, first you should have some very basic knowledge of JavaScript and CSS, if you don't have any I recommend you read my JavaScript Introduction Here or search around the web for tutorials.
So, first How do you change HTML text with JavaScript? Here's an example:
Create an <h3> heading tag in HTML body and give it an id of 'h3style', then create an JavaScript event of OnMouseOver and target that to the function "changeText();".
<h3 id="h3style" OnMouseOver="changeText();">Rollover</h3>
Then create a <script type="text/javascript"> tag in your HTML head and put the following code in it:
<script type="text/javascript">
function changeText()
{
document.getElementById("h3style").firstChild.nodeValue="Bored";
return true;
}
</script>
function changeText()
{
document.getElementById("h3style").firstChild.nodeValue="Bored";
return true;
}
</script>
What's happening above is the element id 'h3style' is being called and it's 'firstChild' which is originally the first text is being called to change it's nodeValue (nodeValue is the main value like in this case it was 'Rollover' and when the mouse hovers over it it says 'Bored')
You could create an OnMouseOut event and make it change to something else when the mouse hovers out.
And that's how you change HTML text with JavaScript. You can target divs, tables or as far as I know this works with absolutely any HTML tag.
Next, How do you change CSS Properties with JavaScript? Here's how:
from what you just created above in 'How do you change HTML text with JavaScript?' it already has an an element of <h3> with and id of 'h3style', we will use it's id to create a CSS property.
Create a CSS h3style property and give it a color change effect, like below:
<style type="text/css">
#h3style {
color: brown;
}
</style>
#h3style {
color: brown;
}
</style>
Now, goto your JavaScript section and we're going to add new document.GetElementById to the changeText(); function you've created above, add the bolded line from below to the functions.
UPDATE* You could also use '.innerHTML' instead of targeting '.firstChild'. Example: "document.getElementById("h3style").innerHTML="Bored";
function changeText()
{
document.getElementById("h3style").style.color="gray";
document.getElementById("h3style").firstChild.nodeValue="Bored";
return true;
}
{
document.getElementById("h3style").style.color="gray";
document.getElementById("h3style").firstChild.nodeValue="Bored";
return true;
}
Test the whole thing in your browser and it'll work as shown.
What's happening above is again it's calling the 'h3style' id and after that the CSS style color is being called to change to 'gray' from 'brown'.
This is quite simple, you just need to call for style with .style before the CSS property that you want to change and then you can add padding, border, background, font-size, transform and much more to it!
If you have any question or anything, Please let us know down below.