Modifying CSS Styles
| Category | : CSS | Views | : 5864 | ||
| Version | : 3.0 | Rating | : | ||
| Type | : Text | ||||
You have heard before that you can combine CSS styles with scripts, but now, we are going to talk about how you can modify a certain CSS style through programming. What I will show you in the next example is that you can make any kind of change you want to a certain style in a dynamic way. And of course, this will happen while your page is display, and it will not require any kind of reload.
How to change styles
I have been mentioning something about an example above. If you want to see it yourself in action, copy paste it in notepad, and save it with an .htm extension.
<html>
<head>
<script>
function changestyle(obj,sname,ch) {
var dom = document.getElementById(obj).style;
dom [sname] = ch;
}
</script>
<style>
#test {
font-size: 10px;
width: 600px;
}
</style>
</head>
<body>
<h1 id="head1" onmouseover="changestyle(‘pfirst’,’fontSize’,’15px’);
changestyle(‘head1’,’color’,’blue’);">
Move your mouse over this portion.
</h1>
<br />
<br />
<p id="test">
Now you see what it happens? Yes, the text size expands.
Now this is a pretty neat trick!
</p>
</body>
</html>
In order to test (and of course, maybe future edit) this example you only have to follow these few steps:
- Copy paste the text I have written here into a new notepad document (or any other text editor you like).
- Save the new document like this desiredname.htm.
- Now, after you have save it, open it with your preferred browser.
- Hover the mouse over the headline to see what the script does.
Now, what you will see is that the headline will turn blue (you can change the color in the script) and the size of the text will expand from 10px to 15px. Insert larger values if you want to see a clear difference between the two. Something else you might notice while editing and testing the code is that you can use HTML attributes to trigger any changes to the CSS styles. In this case we used the "onmouseover" attribute. With this triggering way you can do a lot of neat stuff such as manipulating colors, or dropping paragraphs or lists, adjusting sizes and shapes, and practically almost you can think of.
Good luck!
 |
 |
 |
 |
 |
Video tutorial: Forex trading
Sponsors
