Setting Styles with JavaScript
Introduction
Setting Style with JS
- Introduction
- Setting Visibility
- Setting Style
- Getting Style
- ClassName Swap
- Summary
Usage of functions to get and set CSS values. Beginner to intermediate JavaScript.
getElementByIdmethod- Accessing the style attribute and its properties
- parameter passing
- Reading styles
I will show you the basic idea of how to access and change styles. After that, I will show you a smart function that changes any style for any object.
How to access an object's visibility style property:
var obj= document.getElementById(obj); obj.style.visibility = "visible";
Many CSS style names use a hyphen. So how do you identify a hyphenated style such as background-color? The "-" character is omitted, and the character following it is capitalized. In CSS you use: background-color, font-size, border-width but in JavaScript, you use backgroundColor, fontSize, and borderWidth.
Object has no properties error
Make sure you calldocument.getElementById(myDiv) after
the page
has loaded. You can do this with a body onload handler.
Otherwise, you will get an error and the script will not work. The reason this
happens is that the script is trying to access an element in the page before
the page is loaded. Since the element is not yet loaded, JavaScript can't find
it.
Tags
- Best Practices
- Browsers
- CSS
- Debugging
- Design Patterns
- ECMAScript 4
- JSON
- JavaScript
- Testing
- Threads
- Widget
Archived Scripts
AnimTree
Tabs
GlideMenus
DragLib
