Trying to find Style Sheet Properties

[JimO]

I'm a newbie at this and I can't seem to find a list properties names to
change styles on the fly. So far I've been lucky and managed to guess the
names such as

BodyElement.sty le.marginTop = 0;
BodyElement.sty le.paddingTop = 0;

Can anybody direct me to a list of CSS properties available in javascript?

[David Dorward]

JimO wrote:

Can anybody direct me to a list of CSS properties available in javascript?

They are the same as those available in CSS, except that foo-bar becomes
fooBar.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[RobG]

JimO wrote:

I'm a newbie at this and I can't seem to find a list properties names to
change styles on the fly. So far I've been lucky and managed to guess the
names such as

BodyElement.sty le.marginTop = 0;
BodyElement.sty le.paddingTop = 0;

Can anybody direct me to a list of CSS properties available in javascript?

Here is the full list of CSS 2.1 style properties.

<http://www.w3.org/TR/CSS21/propidx.html>

There aren't any browsers that fully implement CSS 2 yet, so all
browsers will not support some properties, which ones aren't covered
will vary. CSS 1 is pretty well covered by the major browsers.

You can access the style in JavaScript by using 'camelCase', that is,
remove the hyphen and capitalise the following letter. e.g.
background-color becomes backgroundColor , etc.

<http://www.w3.org/TR/CSS21/propidx.html>
--
Rob

[Martin Honnen]

JimO wrote:

Can anybody direct me to a list of CSS properties available in javascript?

The W3C DOM Level 2 defines these properties:
<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties>
So if you do DOM Level 2 scripting with JavaScript then those should be
supported. But browser implementations vary, in particular IE/Win is not
up to date so check
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/css/reference/attributes.asp>
as well where the CSS properties that IE/Win implements are listed, the
notation of that page is the CSS notation (e.g. border-style), to find
how to use that from script you have to follow the link for a certain
property then e.g. if you follow the link for float then you will find
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/properties/float.asp>
telling you that the CSS property is scripted as object.style.st yleFloat
for IE.
But the advice already given that CSS property-name becomes propertyName
for scripting is a valid one to start scripting if you already know the
CSS support of your target browser(s). If you run into trouble then with
a particular property name it is time to check those docs carefully.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Jim Davis]

"RobG" <rg***@iinet.ne t.au> wrote in message
news:43******** *************** @per-qv1-newsreader-01.iinet.net.au ...

JimO wrote:

I'm a newbie at this and I can't seem to find a list properties names to
change styles on the fly. So far I've been lucky and managed to guess
the
names such as

BodyElement.sty le.marginTop = 0;
BodyElement.sty le.paddingTop = 0;

Can anybody direct me to a list of CSS properties available in
javascript?

Here is the full list of CSS 2.1 style properties.

<http://www.w3.org/TR/CSS21/propidx.html>

There aren't any browsers that fully implement CSS 2 yet, so all browsers
will not support some properties, which ones aren't covered will vary.
CSS 1 is pretty well covered by the major browsers.

If you want to see, exactly, the properties available (at least in IE or
Firefox - but it may work in others) you can use my debugging library here:

<http://www.depressedpr ess.com/depressedpress/Content/Development/JavaScript/Extensions/DP_Debug/Index.cfm>

Once added to the page it you can use:

Object.dpDump(B odyElement.styl e) to see all of the properties and their
current values.

Like Rob said however: for the most part all of the modern browser have
most, if not all, of CSS1 with CSS2 less likely and CSS3 even less likely.

For a more cross-browser approach to property availability you might also
consider checking out "TopStyle" from bradburysoftwar e.com - it's a truly
excellent style-sheet browser which can be set to display only those
properties available in specific specifications or browsers.

It also offers INSANELY useful style-checker which provides "quirk notes"
about different browser implementations and issues.

Very , very nice.

Jim Davis

[JimO]

Thanks for the input guys!
"JimO" <jo************ ********@earthl ink.net> wrote in message
news:Ny******** *********@newsr ead1.news.pas.e arthlink.net...

I'm a newbie at this and I can't seem to find a list properties names to
change styles on the fly. So far I've been lucky and managed to guess the
names such as

BodyElement.sty le.marginTop = 0;
BodyElement.sty le.paddingTop = 0;

Can anybody direct me to a list of CSS properties available in javascript?

[RobG]

Jim Davis wrote:
[...]

If you want to see, exactly, the properties available (at least in IE or
Firefox - but it may work in others) you can use my debugging library here:

<http://www.depressedpr ess.com/depressedpress/Content/Development/JavaScript/Extensions/DP_Debug/Index.cfm>
That's neat, but it seems to never finish loading in Firefox, should
there be calls to close() after writing the frames (are frames necessary)?

Once added to the page it you can use:

Object.dpDump(B odyElement.styl e) to see all of the properties and their
current values.

A quick 'n dirty version is:

<div id="fred">fred div</div>
<script type="text/javascript">
function showAtts( el ){
var elStyle = el.style;
var txt = '';
for ( prop in elStyle ){
txt += prop + ': ' + elStyle[prop] + '<br>'
}
document.getEle mentById('fred' ).innerHTML = txt;
}
showAtts( document.getEle mentById('fred' ) );
</script>
[...]

--
Rob

[Dr Clue]

JimO wrote:

I'm a newbie at this and I can't seem to find a list properties names to
change styles on the fly. So far I've been lucky and managed to guess the
names such as

BodyElement.sty le.marginTop = 0;
BodyElement.sty le.paddingTop = 0;

Well, in my jsDHTMLlib.js library I have a function called
DCo2a(anyObject ) and it uses the for( x in anyObject) javascript
syntax to iterate through the members of an object , giving their names
and values. You'll find lots of good code to snag in there.
Just goto my site and click on [ DHTML ].
http://www.drclue.net

There is also code in there to read the entries directly from
stylesheets on-the-fly. DCgetCSSclass() . This latter function does not
yet work in Opera, but it does work for IE,NS,Firefox and most others.

I have a new piece of code I'm adding that allows one to access Opera
stylesheets too. I just need to incorporate it into the library.
This will allow all my DHTML applicaitons to configure their appearance
via CSS.

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript, TCP ...
--`

[Dr Clue]

JimO wrote:

I'm a newbie at this and I can't seem to find a list properties names to
change styles on the fly. So far I've been lucky and managed to guess the
names such as

BodyElement.sty le.marginTop = 0;
BodyElement.sty le.paddingTop = 0;

Well, in my jsDHTMLlib.js library I have a function called
DCo2a(anyObject ) and it uses the for( x in anyObject) javascript
syntax to iterate through the members of an object , giving their names
and values. You'll find lots of good code to snag in there.
Just goto my site and click on [ DHTML ].
http://www.drclue.net

There is also code in there to read the entries directly from
stylesheets on-the-fly. DCgetCSSclass() . This latter function does not
yet work in Opera, but it does work for IE,NS,Firefox and most others.

I have a new piece of code I'm adding that allows one to access Opera
stylesheets too. I just need to incorporate it into the library.
This will allow all my DHTML applicaitons to configure their appearance
via CSS.

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript, TCP ...
--`

[Jim Davis]

"RobG" <rg***@iinet.ne t.au> wrote in message
news:9f******** *********@news. optus.net.au...

Jim Davis wrote:
[...]

If you want to see, exactly, the properties available (at least in IE or
Firefox - but it may work in others) you can use my debugging library
here:

<http://www.depressedpr ess.com/depressedpress/Content/Development/JavaScript/Extensions/DP_Debug/Index.cfm>

That's neat, but it seems to never finish loading in Firefox, should there
be calls to close() after writing the frames (are frames necessary)?

Yeah... I noticed that... it DOES finish (on mine at least) but it just
taken upwards of 20 seconds. I'm not sure why (it does the same thing
seemingly regardless of the close()).

Frames are just to keep the controls visible - they're not needed for the
functionality. I could have done this in several other ways... but I
didn't. ;^)

I guess I can close the document now... I was doing straight
"document.write ()" so I wasn't closing (so that multiple dumps could go to
the same window... but I've since switched to accessing the DOM.

It'll be done in the next release.

Jim Davis