Toon posts:

[DOM] toegepaste style properties krijgen van een element

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik heb een textarea en een iframe. Nou wil ik alle stijleigenschappen die de textarea heeft kopieren en toekennen aan die iframe. De stijlen worden toegekend via een stylesheet (geen inline stijl-object)
Dit blijkt niet te kunnen of zo?
Ik ken de computedstyle en de currenstyle objecten, maar die zijn voor mij nutteloos voor lengte-eenheden, omdat deze automatisch worden omgezet naar absolute eenheden, terwijl ik ook de evt relatieve eenheden (e.g. % waarden) die toegekend zijn aan het textarea-element moet hebben.

Is er een manier?
Stijleigenschappen die toegekend zijn via een stylesheet worden niet automatisch in het style-object gezet van het element. Dit zou ik wel handig vinden, maar dit is kennelijk niet toegestaan voor de browser-bouwers.

  • André
  • Registratie: Maart 2002
  • Laatst online: 19-08 12:30

André

Analytics dude

Verwijderd schreef op 14 October 2003 @ 13:54:
Ik ken de computedstyle en de currenstyle objecten, maar die zijn voor mij nutteloos voor lengte-eenheden, omdat deze automatisch worden omgezet naar absolute eenheden, terwijl ik ook de evt relatieve eenheden (e.g. % waarden) die toegekend zijn aan het textarea-element moet hebben.
Als ik de currentStyle opvraag krijg ik toch echt de juiste lengte-eenheden. Dus als ik hem met % zet krijg ik hem ook zo terug. (win98 IE6)

Verwijderd

Topicstarter
Mijn fout, sorry, ik had het niet getest in IE (omdat ik het niet nodig heb voor IE) Daar werkt het dus.
Ik moet het eigenlijk werkend krijgen in Mozilla. Er zit dus kennelijk een verschil tussen currentstyle en computedstyle. Met computedstyle krijg ik toch echt alleen een px-waarde terug. Hoe krijg ik in Mozilla toch ook weer het percentage terug?
Zover ik het begrepen en gezocht heb, is het niet mogelijk met w3c methodes, maar ik kan het natuurlijk heel goed verkeerd hebben.

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Er is geen eenduidige methode voor zover ik weet. In Opera is er zelfs geen enkele methode om de current/computedstyle te achterhalen.
Misschien dat je via de stylesheets verzameling en de rules daarbinnen nog iets kan doen.

Intentionally left blank


Verwijderd

Topicstarter
Ik ben bezig met iets Mozilla only, dus het hoeft alleen daar maar in te werken.
In principe is de getcomputedstyle methode de w3c manier. Maar het ziet ernaar uit dat die manier beperkter is dan de currentstyle methode van IE.

Hier staat er wat over in:
http://www.w3.org/TR/2000...l#CSS-OverrideAndComputed
CSSStyleDeclaration
The computed style. The CSSStyleDeclaration is read-only and contains only absolute values.
Ik dacht zelfs dat ik ergens een stukje had gevonden waar expliciet stond dat er geen informatie staat van de stylesheet bij de elementen waar het voor gold, maar dat kan ik al weer niet vinden.

Nou ja, er zijn wel verscheidene andere manieren om ongeveer hetzelfde te bereiken als wat ik nu wil. Ik ben alleen verbaasd (en teleurgesteld) dat het niet mogelijk is zoals ik het wil. :)

  • André
  • Registratie: Maart 2002
  • Laatst online: 19-08 12:30

André

Analytics dude

Verwijderd schreef op 14 October 2003 @ 16:33:
Nou ja, er zijn wel verscheidene andere manieren om ongeveer hetzelfde te bereiken als wat ik nu wil. Ik ben alleen verbaasd (en teleurgesteld) dat het niet mogelijk is zoals ik het wil. :)
Wat wil je bereiken dan?

Verwijderd

Topicstarter
Effe wat simpele code om het probleem wat duidelijker te maken:
code:
1
2
3
4
5
6
7
8
9
<style>
textarea{
width:50%;
background-color:green;
}
</style>
<body>
<textarea></textarea>
<iframe></iframe>

iframe wil ik nu dezelfde stijleigenschappen geven als textarea.
Alleen, ik wil het op een moeilijke manier doen: via de DOM.
En nog iets moeilijker: De stijleigenschappen voor die specifieke textarea, die wil ik ook laten gelden voor die specifieke iframe.
De getcomputedstyle methode zal wel werken voor de background-color, maar voor de width niet, omdat ik daar een waarde terug krijg in pixels, ipv %.

  • Annie
  • Registratie: Juni 1999
  • Laatst online: 25-11-2021

Annie

amateur megalomaan

Is je voorbeeld ongelukkig gekozen of begrijp ik er geen snars van (zal niet de eerste keer zijn :+)?
Percentage van de breedte is toch voor beide elementen hetzelfde omdat ze binnen dezelfde 'container' vallen?

[ Voor 20% gewijzigd door Annie op 14-10-2003 18:35 ]

Today's subliminal thought is:


  • André
  • Registratie: Maart 2002
  • Laatst online: 19-08 12:30

André

Analytics dude

Jij begrijpt het niet. Hij wil als er op de textarea een width van 50% staat die ook op de iframe zetten. Maar in mozilla geeft hij dan de echte breedte (offsetwidth) terug ipv de relatieve breedte.

Verwijderd

Topicstarter
Inderdaad, dat bedoel ik.
Hier staat ook wel iets over het probleem vermeld zie ik nu. Vanaf comment 8:
http://bugzilla.mozilla.org/show_bug.cgi?id=32169#c8
Het blijkt dus wel dat er ooit eens over is nagedacht, maar een extra methode of object om echt de 'gecascade' values (dus ook de relatieve) is nooit van de grond gekomen. Helaas :(

  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 22-06 13:51

Clay

cookie erbij?

Je kan ook voor een iets makkelijkere oplossing gaan dan; stop de textarea in een div, geef de div een class, en doe het met css:

Cascading Stylesheet:
1
2
3
.klasse textarea, .klasse iframe {
   /* style voor textarea & iframe */
}


Een iframe die ook in die div staat of komt krijgt dan ook die style. Is een stuk makkelijker lijkt me.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin


  • flashin
  • Registratie: Augustus 2002
  • Laatst online: 17-12-2023
iframe wil ik nu dezelfde stijleigenschappen geven als textarea.
Alleen, ik wil het op een moeilijke manier doen: via de DOM.
:)

  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 22-06 13:51

Clay

cookie erbij?

Ja, dat heb ik ook gelezen :) maar dat hoeft dus niet. je kan met de dom een iframe toevoegen aan de node waar die textarea ook in zit, en dan de css al eerder zodanig op die parentNode toegepast hebben dat zowel de textarea als de iframe dezelfde style krijgen. veel makkelijker.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin


Verwijderd

Topicstarter
Je hebt gelijk Clay, dat kan en dat is in mijn situatie ook heel goed mogelijk.
Ik was een soort rich text editor aan het maken in Mozilla met xbl.
De binding heb ik zitten aan class=richedit <div class=richedit><textarea>blah blah</textarea></div>
Via de binding wordt anoniem een iframe toegevoegd. Ik had dus liever gehad dat alles wat anoniem wordt toegevoegd, wordt gestyled in de xbl-binding file en alles wat niet anoniem wordt toegevoegd juist niet daarin wordt gestyled (niet in de xbl wel in het normale document).
Maar de iframe moet dus wel de style-eigenschappen van de textarea overnemen, zoals ik had gezegd.

Ik was het nu alleen een beetje heel erg in het geheel aan het trekken, omdat ik begin te vinden dat currentstyle veel beter werkt dan getcomputedstyle. Met currentstyle is het volgens mij ook mogelijk om te ontdekken welke elementen worden beinvloed door het toevoegen of aanpassen van een rule in een stylesheet. Dat zie ik met getcomputedstyle ook al niet lukken.

edit:
o ja, en ik wou dus ook liever de normale dom met rust laten, en het liefst het in anonymousnodes laten houden.

[ Voor 8% gewijzigd door Verwijderd op 16-10-2003 00:42 ]


Verwijderd

als je het toch voor mozilla doet, gebruik dan XBL is ook superhandig voor anonymous nodes e.d.

Verwijderd

Topicstarter
Dat zeg ik, XBL...
Pagina: 1