Søg
Avatar billede kongknabe Nybegynder
26. august 2008 - 19:18 Der er 17 kommentarer og
1 løsning

Find et elements max-width med JS?

Hejsa..

har nu ledt google igennem som en sindssyg og kan simpelthen ikke finde ud af hvordan man med Javascript aflæser et elements min/max-width/height!?

Kan dette slet ikke lade sig gøre eller?
Avatar billede w13 Novice
26. august 2008 - 19:20 #1
Hvad mener du med min- og max- width og-height? Altså det, som er sat med CSS? Det tror jeg faktisk ikke rigtig, du kan, hvis det ikke er sat i en style-attribut på elementet. Men det er da muligt, at jeg tager fejl.
Avatar billede mclemens Nybegynder
26. august 2008 - 19:35 #2
Har heller ingen ide om det, men en måde kunne måske være:
(synes jeg læste noget om computed-style på et tidspunkt
(for ca. 1½ år siden, men læste ikke videre på det, da den
ikke kunne fange det jeg ledte efter på daværende tidspunkt).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
window.onload=function(){
  alert(checkit(document.getElementById("a")));
}

function checkit(elm){
  var h=elm.offsetHeight;
  var w=elm.offsetWidth;
  var elms=elm.style;
  var vals=[];

  elms.height="1px";elms.width="1px";
  vals[0]="min-width: "+(elm.offsetWidth>1?elm.offsetWidth:"");
  vals[1]="min-height: "+(elm.offsetHeight>1?elm.offsetHeight:"");

  elms.height="99999px";elms.width="99999px";
  vals[2]="max-width: "+(elm.offsetWidth<99999?elm.offsetWidth:"");
  vals[3]="max-height: "+(elm.offsetHeight<99999?elm.offsetHeight:"");

  elms.height=h+"px";elms.width=w+"px";
  return vals;
}
</script>

<style type="text/css">
#a {background:red;
min-width:100px;
max-width:500px;
min-height:200px;
max-height:300px;
}
</style>

</head><body>

<div id="a"></div>

</body></html>
Avatar billede mclemens Nybegynder
26. august 2008 - 19:40 #3
<script type="text/javascript">
window.onload=function(){
  elm=document.getElementById("a");
  if(document.defaultView){
    alert(document.defaultView.getComputedStyle(elm, null).maxWidth);
    alert(document.defaultView.getComputedStyle(elm, null).maxHeight);
    alert(document.defaultView.getComputedStyle(elm, null).minWidth);
    alert(document.defaultView.getComputedStyle(elm, null).minHeight);
  }
}
</script>

... Men det er kun til Firefox :-/
Avatar billede w13 Novice
26. august 2008 - 19:45 #4
Ja, det var også det, jeg kom frem til for noget tid siden. :(
Avatar billede mclemens Nybegynder
26. august 2008 - 19:46 #5
http://erik.eae.net/archives/2007/07/27/18.54.15/

<script type="text/javascript">
window.onload=function(){
  elm=document.getElementById("a");
  alert(getStyle(elm,"maxWidth"));
  alert(getStyle(elm,"minWidth"));
  alert(getStyle(elm,"maxHeight"));
  alert(getStyle(elm,"minHeight"));
}


function getStyle(el, prop) {
  if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el, null)[prop];
  } else if (el.currentStyle) {
    return el.currentStyle[prop];
  } else {
    return el.style[prop];
  }
}

</script>
Avatar billede w13 Novice
26. august 2008 - 19:46 #6
Ellers må man jo lave en kode, som simulerer min- og max-width og -height, f.eks. tømmer elementet og måler bredden. Så burde man jo have min-width og -height (plus padding godt nok).
Avatar billede mclemens Nybegynder
26. august 2008 - 20:15 #7
Hmm, afhængig af behovet kan det godt ske at kommentar
1 derinde skal implementeres istedet for currentstyle.
Avatar billede olebole Juniormester
26. august 2008 - 21:22 #8
<ole>

- eller bare:

function getStyle(el, prop) {
  if (getComputedStyle) {
    return getComputedStyle(el, null)[prop];
  } else if (el.currentStyle) {
    return el.currentStyle[prop];
  } else {
    return el.style[prop];
  }
}

/mvh
</bole>
Avatar billede mclemens Nybegynder
26. august 2008 - 21:30 #9
I Ole's eksempel skal
  if (getComputedStyle) {
nok lige rettes til
  if (document.defaultView) {
- Ellers så får man problemer i IE7 hos mig ...
Avatar billede mclemens Nybegynder
26. august 2008 - 21:31 #10
, Men der måske spørges på både den og
getComputedStyle som i 26/08-2008 19:46:01
Avatar billede mclemens Nybegynder
26. august 2008 - 22:17 #11
Vi kan dog måske spare lidt else væk da return jo vil afslutte funktionen.

function getStyle(el, prop) {
  if(document.defaultView && document.defaultView.getComputedStyle)return getComputedStyle(el, null)[prop];
  if(el.currentStyle)return el.currentStyle[prop];
  return el.style[prop];
}
Avatar billede mclemens Nybegynder
26. august 2008 - 22:27 #12
Lægger du ikke også lige et svar Ole ?
Avatar billede olebole Juniormester
26. august 2008 - 22:51 #13
function getStyle(el, prop) {
  if (window.getComputedStyle) {
    return getComputedStyle(el, null)[prop];
  } else if (el.currentStyle) {
    return el.currentStyle[prop];
  } else {
    return el.style[prop];
  }
}
Avatar billede olebole Juniormester
26. august 2008 - 22:54 #14
- eller:
    if (typeof getComputedStyle=="function") {

Nej, jeg skal ikke have points. Jeg fjernede blot document.defaultView, som i almindelige situationer er det samme objekt som window  =)
Avatar billede kongknabe Nybegynder
27. august 2008 - 00:04 #15
Sikke dog mange svar.. fantastisk! :D

Tusind tak for hjælpen. Har ikke prøvet det endnu, men går ud fra alt er fint når olebole ikke brokker sig :D

Point givet til mclemens (Hvis andre mener de bør have siger de bare til.. kan ikke lige overskue det helt :))
Avatar billede olebole Juniormester
27. august 2008 - 00:14 #16
Hehe ... zq rart, når folk kender en!  ;D

- men jeg tror nu ikke, du endnu har givet mclemens pointene  =)
Avatar billede mclemens Nybegynder
27. august 2008 - 14:41 #17
Takker for point :)
Avatar billede kongknabe Nybegynder
27. august 2008 - 14:42 #18
Du har ret.. NU er point givet :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 0 I går 20:09 -
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 20:09 problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript
I går 18:26 Problemer med Prestashop Af BCP i E-handel
I går 18:10 Google Home Af birdbrain i Apps til iOS
I går 14:46 Microsoft vil "stjæle" mine login oplysninger Af mort1 i Windows
I går 14:35 trådløst tastatur Af ole i Andet hardware
White papers
Flere white papers »