[js/css] style uit een stylesheet halen? - Softwareontwikkeling

zaterdag 8 januari 2005 16:31

Acties:

Verwijderd

Topicstarter

Ik wil graag de style uit een stylesheet halen,
Ik heb een simpel scriptje getypt om het ff te testen:

JavaScript:

<script type="text/javascript">
  window.onload = function() {
   alert(document.getElementById('pre').style.backgroundPosition);
  }
</script>

met stylesheet:

HTML:

<style type="text/css">
  pre {
    background-position: 12px 14px;
  }
</style>

<pre id="pre">
  alert is leeg
</pre>

style inline:

HTML:

1
2
3

<pre id="pre" style="background-position: 12px 14px;">
  alert geeft 12px 14px aan
</pre>

dus de vraag, is het mogelijk om de style van een element uit het stylesheet te halen?
hoe doe ik dat dan?

zaterdag 8 januari 2005 16:38

Acties:

BtM909

Watch out Guys...

Gaat het je om de daadwerkelijke style uit je <style> tag (waardoor je het dus als object (eigenlijk Array) benaderd) of wil je de toegepaste style uitlezen?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

zaterdag 8 januari 2005 16:47

Acties:

Verwijderd

Topicstarter

toegepaste style, dus alleen van dat element

zaterdag 8 januari 2005 16:47

Acties:

CH4OS

It's a kind of magic

De style uit een stylesheet halen, kan ook zonder JS...
Je zet dan in de <head>-tag:

HTML:

1	<link rel="stylesheet" type="text/css" language="css" href="je_stylesheet">

Dan hoef je daarna alleen nog maar de CSS class of ID in de desbetreffende HTML tag te zetten...

Of bedoel je dat je een andere style op wil vragen, als je bijvoorbeeld met de muis over een vakje heen hoverd? Dan kan je (correct me if I'm wrong) gebruik maken van onmouseover en onmouseout en die geef je dan

JavaScript:

1	this.style.class='jeclass'

Mocht dat ook niet werken, of zijn wat je zocht, dan kan je denk ik even naar dit kijken, wat ik vond met Google...

[ Voor 25% gewijzigd door CH4OS op 08-01-2005 16:55 ]

zaterdag 8 januari 2005 16:49

Acties:

Clay

cookie erbij?

in IE moet je dat uit de .currentStyle van het element halen, en in moz met document.defaultView.getComputedStyle(). ala:

code:

function getStyleValue(htmlElement, cssProperty) {
    var style = htmlElement.currentStyle || document.defaultView.getComputedStyle(htmlElement, '');
    return style[cssProperty] || style.getPropertyValue(cssProperty);
}

en dan b.v.

code:

1
2
3

window.onload = function() {
    alert(getStyleValue(document.getElementById('pre'), 'backgroundRepeat'))
}

Dan werkt het ook met geinclude stylesheets (want inline css wil je niet). Je hebt alleen wel een probleem, want IE slaat de backgroundPosition op als backgroundPositionX en backgroundPositionY, niet gewoon als "backgroundPosition" zoals moz dat doet.

[ Voor 17% gewijzigd door Clay op 08-01-2005 16:51 ]

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

zaterdag 8 januari 2005 16:52

Acties: