ansaurus

Question

Can't Access CSS Selector's Properties from Javascript

Answer 1

A:

I suggest you take a look at jQuery and some of the posts at Learning jQuery, it will make doing things like this very easy.

Tom 2009-06-26 10:17:00

e.g. $('#myStyle').css("opacity","0.8")

Fermin 2009-06-26 10:19:43

While I'm happy to use jQuery or whatever else will get the job done, I'd like to understand what concept it is that I'm missing which explains the behavior I'm seeing. Perhaps you could tell me what specific areas of HTML/CSS/Javascript I should be researching?

2009-06-26 10:25:55

jQuery is cool, but it is just an abstraction of the function phoenix explains in his answer.

Boldewyn 2009-06-26 10:37:11

Answer 2

A:

Opacity should be a number rather than a boolean. Is it working in any other browseR?

Fermin 2009-06-26 10:17:25

Ah, sorry, I was unclear. I would expect a float/number when attempting to access the opacity property, but it doesn't seem the value exists. For example: if (!document.getElementById('myStyle').style.opacity) alert('Aw oh!');This code always displays the alert, in Safari and Firefox. I suppose I'm missing some fundamental concept here, I'm just not sure what it is or what I can do to access the 'opacity' property.Thanks for the response!

2009-06-26 10:23:27

Answer 3

A:

this link help

http://www.quirksmode.org/js/opacity.html

function setOpacity(value) {
    testObj.style.opacity = value/10;
    testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
}

opacity is for Mozilla and Safari, filter for Explorer. value ranges from 0 to 10.

Haim Evgi 2009-06-26 10:20:04

Answer 4

+5 A:

You can get the values set through class only after their computation.

var oElm = document.getElementById ( "myStyle" );
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle)
{
strValue = document.defaultView.getComputedStyle(oElm, null).getPropertyValue("-moz-opacity");
}
else if(oElm.currentStyle)    // For IE
{
strValue = oElm.currentStyle["opacity"];
}

alert ( strValue );

rahul 2009-06-26 10:27:40

Comments rule! currentStyle handles IE's way, getComputedStyle() is supported by anyone else. document.defaultView is a way of getting the `window` that is responsible for rendering the document. By the way, `-moz-opacity` will not work anymore (since FF 2, and in Opera and WebKit it never did).

Boldewyn 2009-06-26 10:32:42

... use a simple 'opacity' instead of '-moz-opacity', I should have added.

Boldewyn 2009-06-26 10:38:00

But i FF opacity is not applied.

rahul 2009-06-26 11:01:01

@rahul: I would reccomend reading this great article: http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 about the general issues could rise by using this function.

Marco Demajo 2010-08-17 11:57:26

Answer 5

+1 A:

The problem is, that element.style.opacity only stores values, that are set inside the element's style attribute. If you want to access style values, that come from other stylesheets, take a look at quirksmode.

Cheers,

Boldewyn 2009-06-26 10:28:55

ah yes, or take phoenix' approach.

Boldewyn 2009-06-26 10:30:27

Ah ha! Thank you very much for the link and explanation. It's very clear now.

2009-06-26 10:34:48

This, however, is not only the case for opacity, but for every other style property. Try to add 'color:red;' to your stylesheet and alert(document.getElementById('myStyle').style.color) to your event handler.

Boldewyn 2009-06-26 10:35:43

ansaurus

tags:

views:

answers:

Can't Access CSS Selector's Properties from Javascript

related questions