JavaScript questions from a newbie

Question

1) Can js access an external style sheet? I tried using object.style.width but this only returned a value when the css was declared inline in the html or via JavaScript.

2) The returned value of object.style.width seems to be a string. In my case, “300px”. Must I convert it to an integer? Or have I called the property incorrectly?

3) Finally, referencing an object property like: object.style.left. How can I find what other properties of objects are accessible? Is there any reference library in this app?

Answer 1

When you access the object.style.width attribute in javascript, you access the attribute "style" of the <object> html tag element, in wich you access the "width" css property... So if you have <div id="my_div" style="width:100px; height:50px;"> in your document, you can do:

var obj = document.getElementById('my_div'); // retrieve the html element in a variable named "obj"

alert(obj.id); // will alert "my_div"
alert(obj.style); // will alert "width:100px; height:50px;"
alert(obj.style.width); // will alert "100px"
alert(obj.style.height); // will alert "50px"

All attributes are stored in string format, so you should convert them if needed ( and the conversion don't be auto, which is often with non-typed languages like JS ). Well, when setting properties like "width" you need a unit append to it, so the conversion is made when appending it to your value:

var w = 50; // variable "w" content is integer
obj.style.width = w + "px";

And finally, you can access all css properties via the style attribute... and because object.style is an object like another, you can set all the attribute you want, but only the css attribute will have an effect ( but you can use custom created attribute as special var, embeded in html elements -- life time of them will be just the last time of your page )

WARNING: css names properties with dash in them, do be converted for JS access ( ie: "margin-right" should becomes "marginRight" in JS names properties, or "background-image" should becomes "backgroundImage", and so on... )

Answer 2

1. object.style.width does not need any css stylesheet because it is located in the <script> tag. If a <div id=obj> tag has a width of 50px, changing it would be something like document.getElementById("obj").style.width = "100px" ;

2. Based on my answer on question 1, it is likely to be a string.

3. I don't understand.

Answer 3

Oh, I forgot this:

You can access "externals" css style sheets with JS, but it's ( very ) difficult ( but not impossible ) to handle it with cross-browser compatibility...
[ EDIT ] Maybe JQuery ( or others frameworks ) have facilities to handle them ^^

For convert string to int, you have the parseInt() function ( and to float, parseFloat() ).
You can convert a string like "100px" directly ( without deleting the "px" ), because the parseInt() function look only at begining characters numericaly significant.

So, I understand you for searching offline reference: years ago I was confronted to same problem, and was satisfied for long time with a html/css/js reference site which was downloadable. It's name is Selfhtml, and although it ever seems to exist, I dont know how it has evolved... and I doubt it can be very usefull for english people, because it's originaly writed in german ( and traduct, at the time, in french -- don't remember if an english version has never existed... )

Answer 4

Thanks for your answers. I'll try the obj.style method with external styles and see what that returns.

Do you think it's possible to convert a string to an integer? Could it be as simple as removing the "px" from the end?

I'm not sure how to explain my 3rd question better... I mean is there some sort of syntax reference list to look at white coding? Or do coders just remember how to write everything perfectly?

Answer 5

I found a good reference app called "HTML, CSS, PHP, JS - book". To explain, I'm studying offline, so can't just Google whenever I get stuck.

Answer 6

Can convert string to integer easily with parseInt()