CSS problems in Opera 6

Changing font properties through JS doesn't work

[DrDoc]

I have a DIV on my page. I want to change the font properties dynamically using JavaScript.

But, if I do document.getElementById('prevfont').style.font = "18px Arial"; it works in every browser but Opera.
However, document.getElementById('prevfont').style.color = "red"; works just fine.

:(

[pcguru333]

Just a guess, but does it matter if the font type is listed after the size?

what if you tried:
document.getElementById('prevfont').style.font = "Arial 18px";

[DrDoc]

Well, pcguru333, I haven't tried that. But CSS standard says that font size is to preceed the font family.

Oh, and as a little side note - if I try to set only 'font-size' or 'font-family' Opera refuses to run the rest of the script. Attempting to set 'font' causes Opera to just ignore that single line.

[Brett_Tabke]

Does it work WITHOUT the javascript? And does the css validate?

[papabaer]

Hi DrDoc!

I'm not sure if Opera will allow the dynamic style changes you are trying to accomplish. IE and NS/MOZ Gecko allow this as you have witnessed, but I am not sure regarding Opera. There is still not full support for DOM.

Opera states that Version 6 is DOM compliant, and yes it is - the browser does recognise most of the DOM, though you can only READ the document, you can't WRITE to it using the DOM at the moment, consequently, you cannot alter CSS through the DOM.

Here is what Opera's TECH Specs [ [opera.com...] ]say on the subject:

JavaScript environment: DOM and DHTML

The following features are missing from JavaScript 1.3 support:

the event variable passed to event handlers does not match the javascript standard
cannot set the SRC attribute of iframes

We are currently working on DOM, based on the DOM 2.0 standard. We have also used some of Microsoft's extensions to DOM, notably the method for accessing CSS properties through a style attribute of the HTML elements. Modifying the document structure is not yet possible (ie. you cannot add or remove HTML elements). There are no plans to support Netscape's dynamic layers. Presently, we support getting and setting the following CSS attributes for absolutely positioned HTML elements:

visibility
pixelLeft, pixelTop
pixelWidth, pixelHeight
zIndex
color, background (only for setting of colors)

We support the following methods in the document object:

getElementsByTagName()
getElementById()
getElementsByName()

We support the following methods in HTML Elements:

getElementsByTagName()
contains()
parentNode

[DrDoc]

Yes, Brett, it works just fine without JavaScript .. and the CSS validates.

Aah .. thanks papabaer! That's exactly what I needed to know. I was a bit puzzled since I could change the color, but not any other style properties. Too bad the keyCode isn't working .. I can live without that though ..

However, maybe I can solve the style.font thing using innerHTML/innerText instead? I need a workaround for Opera .. so I guess I'll just have to put my brain to work ;)