getElementByID, object attributes

[Matko]

Hi dear script people,

DHTML's DOM document.getElementById("id").attributes gives me array of
HTML attributes written inside .html document.

For next snippet i get array of length 1 with attribute name "id" and
attribute value "box1":

<div id=box1>
<p>Paragraf inside a div tag. Paragraf inside a div tag. Paragraf inside a
div tag.</p>
Text inside a div tag. Text inside a div tag. Text inside a div tag.
</div>

How could i get atribute values defined in CSS file (e.g. width and
height)?

#box1 {
position:absolute;
left:200px;
top:450px;
height:50px;
max-width:50px;
background: #309;
}

Regards,

Matko

 

[Matko]

Hi dear script people,

DHTML's DOM document.getElementById("id").attributes gives me array of

sorry: i meant document.getElementById("box1").attributes

 

[Jukka K. Korpela]

DHTML's DOM document.getElementById("id").attributes gives me array
of HTML attributes written inside .html document.

You posted the same question to alt.html and yet answers there, including
requests for clarification, as the question was really confusingly asked.
You were also informed about the style property of elements. And I also
suggested that you explain what you are really trying to achieve, preferably
with a URL.

Posting to a new group without mentioning that in the group where you
originally posted, and without referring to previous discussions, is not
constructive.

 

[VK]

How could i get atribute values defined in CSS file (e.g. width and
height)?

Currently - as of March of 2011 - you can't, sorry.

More details for "no":

a) theoretically you can use document.styleSheets collection to parse
each ruleset and each rule in it for some matching criteria:
https://developer.mozilla.org/en/document.styleSheets
http://msdn.microsoft.com/en-us/library/ms531200(v=vs.85).aspx
It is hugely ineffective in the first place. Secondly it is as
reliable as checking your storage inventory not by going from shelа to
shelf but by studying "your order has been sent" slips from your
providers

b) the current UI (user interface) developers' position is that you
control and you know the exact look at the design time, and for any
"runtime crap" you have element.style object to play with - "adieu,
bye-bye and leave us doing Web 2++ serious stuff". This position
doesn't seem to be tending to change very soon.

c) There is W3C's
document.defaultView.getComputedStyle(elm,
null).getPropertyValue(propertyName);
( https://developer.mozilla.org/en/DOM:window.getComputedStyle )
and semi-corresponding IE's
elm.currentStyle.propertyName
( http://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx
)
They are highly ugly thought and even more ugly implemented
(everywhere in an amazingly different path of ugliness). Yet with some
voodoo dances around they can be used together to get *current*
*internal (a.k.a. normalized)* style value for many browsers. It is
pretty far from your question but at least in that direction.

Unfortunately the above is broken since 2008 on Safari and Opera
( see https://bugs.webkit.org/show_bug.cgi?id=14363 )
and both did not even decide yet if its a bug or a more profound than
anyone else's specs reading. WebKit tends to the first, Opera to the
second. By the "intensity" and the academicity of the discussion you
would say that it may take another 10-20 years or a good slap to the
head before anything will be done.

So if you need exactly the spelled universal solution w/o producing a
lazy sleepy beast then your project might be too advance for this
century.

I would be glad to be mistaken.

 

[Denis McMahon]

You posted the same question to alt.html and yet answers there,
including requests for clarification, as the question was really
confusingly asked. You were also informed about the style property of
elements. And I also suggested that you explain what you are really
trying to achieve, preferably with a URL.

Posting to a new group without mentioning that in the group where you
originally posted, and without referring to previous discussions, is not
constructive.

And confusing - I was sure I answered what I understood the question to
be, and it wasn't until reading your post that I realised why I couldn't
see my answer here - I answered it in alt.html.

Of course, I may not have answered the right question, for the reasons
you mention.

Rgds

Denis McMahon

 

[Thomas 'PointedEars' Lahn]

Currently - as of March of 2011 - you can't, sorry.

Rule of thumb #1 on comp.lang.javascript: Don't listen to "VK".
As can be seen shortly.

More details for "no":

a) theoretically you can use document.styleSheets collection to parse
each ruleset and each rule in it for some matching criteria:

Bullshit. Nothing needs to be parsed. You don't know what parsing is.

https://developer.mozilla.org/en/document.styleSheets
http://msdn.microsoft.com/en-us/library/ms531200(v=vs.85).aspx
It is hugely ineffective in the first place.

Bullshit. CSS properties are available through property access, which is
the fastest data access there is (as it is very likely based on hash tables,
which is the fastest lookup method there is).

Secondly it is as reliable as checking your storage inventory not by going
from shelа to shelf but by studying "your order has been sent" slips from
your providers
Nonsense.

b) the current UI (user interface) developers' position is that you
control and you know the exact look at the design time, and for any
"runtime crap" you have element.style object to play with - "adieu,
bye-bye and leave us doing Web 2++ serious stuff". This position
doesn't seem to be tending to change very soon.

Bullshit and FUD.

c) There is W3C's
document.defaultView.getComputedStyle(elm,
null).getPropertyValue(propertyName);
( https://developer.mozilla.org/en/DOM:window.getComputedStyle )
and semi-corresponding IE's
elm.currentStyle.propertyName
( http://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx
)
They are highly ugly thought and even more ugly implemented
(everywhere in an amazingly different path of ugliness).

They must appear to be ugly for someone so completety incompetent like you.

Yet with some voodoo dances around they can be used together

They can never be used together. So far an implementation supports either
one or the other, whereas *implementations* supporting the latter are
actually in the minority (only MSHTML supports it, all other support W3C DOM
Level 2 Style).

to get *current* *internal (a.k.a. normalized)* style value for many
browsers.
Bullshit.

It is pretty far from your question

What a surprise!

but at least in that direction.

You did not even understand the question, did you?

Unfortunately the above is broken since 2008 on Safari and Opera
( see https://bugs.webkit.org/show_bug.cgi?id=14363 )

The bug report does not pertain to the OP's problem. It is not necessary to
iterate over the properties of a rule to determine the value for a certain
property.

var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;
rules[0].width
rules[0].height

It is also very easy to iterate over all rules of all stylesheets for a
document and make each rule accessible through its selector, but this
posting is too small to contain the example. See

[…]
So if you need exactly the spelled universal solution w/o producing a
lazy sleepy beast then your project might be too advance for this
century.

You have a lazy sleeping beast in your head, called neocortex. Too bad it
never awakened to date.

I would be glad to be mistaken.

No, you would not, for that would shatter the fundaments of the little
fantasy world you have built around yourself.


PointedEars

 

[VK]

On Mar 4, 12:33 pm, Thomas 'PointedEars' Lahn <[email protected]>
wrote:

Bullshit.

I assume that in your mind the
document.defaultView.
getComputedStyle(elm, null).
getPropertyValue(prop);
bureaucratic ugliness gets something else. The sense of life? Oh, shed
light on me!

You did not even understand the question, did you?

The question was:
Having HTML element with ID "box1" and having a reference to this
element using document.getElementById("box1") - how to find for this
element any or all applied CSS rules from embedded and linked style
sheets for the page where the element resides?

The question was rather clearly and nicely formulated with a sample,
so complains that it was obscure or misleading would rather indicate
that respondents have nothing to say yet want to say something.

It is also very easy to iterate over all rules of all stylesheets for a
document and make each rule accessible through its selector, but this
posting is too small to contain the example.  See
<http://PointedEars.de/scripts/css.js> for more (note that the interface is
not yet stable).

This is the practical answer from you to OP I assume. No need post the
whole library. Here is the question case with your library linked.
What to type in instead of // ?

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

<style>
DIV.boxes {
font: bolder 12pt Verdana, sans-serif;
}

DIV#box1 {
width: 50%;
color: #0000FF;
}
</style>

<script src="css.js"></script>

<script>
// ?
</script>

</head>

<body>

<div class="boxes" id="box1" style="color:red">Demo text</p>

</body>
</html>

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:

<irrelevant mumbling snipped>

Not everything that you are not able to understand is irrelevant. In fact,
the record shows that you are not able to understand most things, so you
should be very careful what you call irrelevant.

The question was:
Having HTML element with ID "box1" and having a reference to this
element using document.getElementById("box1") - how to find for this
element any or all applied CSS rules from embedded and linked style
sheets for the page where the element resides?

No, it was not. (See?)

This is the practical answer from you to OP I assume.

(You are particularly bad at making assumptions and should therefore learn
to read instead.) It was not; that answer was elsewhere in my posting, in
the part that you considered irrelevant. (See?)

No need post the whole library. Here is the question case with your library linked.
What to type in instead of // ?

<!DOCTYPE html>

There you go again. HTML5. I guess you will never learn.

<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

<style>
DIV.boxes {
font: bolder 12pt Verdana, sans-serif;

Nobody in their right mind uses the `pt' unit for the screen.

}

DIV#box1 {
width: 50%;
color: #0000FF;
}
</style>

<script src="css.js"></script>

Dependencies are not met. At least collection.js must be included before,
as CSSSelectorList is implemented as a special Collection. Then you could
do:

<script>
// ?

var selectorList = new CSSSelectorList();

var rule1 = selectorList.findSimpleSelector("\\.boxes");
console.log(rule1.fontFamily);

var rule2 = selectorList.findSimpleSelector(/DIV#b.x\d/);
console.log(rule2.width);

But, AISB, css.js is not yet stable (for example, as you can see, and
probably have seen, large parts of
CSSSelectorList.prototype.findSimpleSelector() are disabled.

However, the source code of css.js shows the approach that I mentioned: how
to store references to CSS rule objects according to their selector, and how
to retrieve them by selector afterwards.


PointedEars