[JS/CSS] borderWidth opvragen - Softwareontwikkeling

dinsdag 27 augustus 2002 10:18

Acties:

lief hè!

Topicstarter

In IE werkt dit:

var obj=document.getElementsByTagName('TH');
alert(obj.item(0).currentStyle.borderTopWidth);

nb. met css is de border gezet (1px solid #cccccc;).

IN NS 6.2.1 werkt dit niet.
Volgens verschillende sites kan dit kloppen.
NS heeft maar een beperkte ondersteuning van currentStyle en ondersteund currentStyle.border(Top)Width niet.

Hoe kan ik dan wel de borderWidth uitlezen in NS?

Ik heb ook obj.item(0).style.borderWidth maar dat geeft in NS en IE een lege waarde.

dinsdag 27 augustus 2002 10:20

Acties:

SchizoDuckie

Kwaak

Doet de cssText property het? Zo ja, dan kan je ze daar uit filteren

Stop uploading passwords to Github!

dinsdag 27 augustus 2002 10:31

Acties:

Grom

lief hè!

Topicstarter

Nee, wordt niet ondersteund door NS, heb het hier getest:
http://msdn.microsoft.com...or/dhtml/refs/cssText.htm

dinsdag 27 augustus 2002 10:54

Acties:

edie

gebruik gewoon style ipv currentStyle

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

dinsdag 27 augustus 2002 11:08

Acties:

Grom

lief hè!

Topicstarter

eddie19:
alert(obj.item(i).style.borderWidth);
geeft zowel in IE als in NS een lege waarde.

Ik snap er trouwens steeds minder van.
alert(document.styleSheets[0].cssRules[4].style.borderTopWidth);
geeft in NS netjes 1px maar IE pikt het niet! (leeg of niet bestaand object)

Domme DOM of domme Grom

dinsdag 27 augustus 2002 11:52

Acties:

edie

Grom schreef op 27 augustus 2002 @ 11:08:
eddie19:
alert(obj.item(i).style.borderWidth);
geeft zowel in IE als in NS een lege waarde.

Het is ook borderTopWidth

borderWidth bestaat niet in de Netscape Javascript Reference

code:

<div style="border-width: 1px; border-style: solid" id="test">
Balbalbasfksjfkljfsd
</div>

<span onclick="alert( document.getElementById( 'test' ).style.borderTopWidth )">Klik</span>

Geeft keurig in IE 6 en Mozilla 1.0 een alert box met '1px' erin

Opera 6.05 ondersteund die property (border<Top|Right|Bottom|Left>Width) niet.

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

dinsdag 27 augustus 2002 11:59

Acties:

Verwijderd

Kijk op:
[url]http://www.xs4all.nl/~ppk...l?/~ppk/js/getstyles.html

Er staat nog dat voor veel stijleigenschappen Netscape(=Mozilla) getComputedStyle nog niet werkt, maar volgens mij is dat al een stuk verbeterd.

dinsdag 27 augustus 2002 12:24

Acties:

Grom

lief hè!

Topicstarter

eddie19,
Je hebt helemaal gelijk, zet ik jouw voorbeeld in een .html-etje dan werkt dat in IE en NS perfect

Ik denk dat ik de rest van mijn script waarin ik het nodig heb maar eens moet gaan bekijken al zie ik nog niet waar het probleem zou moeten zitten. Na ja maar weer wat alerten dan.

Btw: jouw voorbeeld heb ik veranderd in border:1px solid black;
vraag ik dan document.getElementById( 'test' ).style.borderWidth op dan geeft:
IE ==> 1px (lijkt me logisch ik heb immers maar een waarde opgegeven)
NS ==> 1px 1px 1px 1px (maar zo hoort het lijkt me)
Het werkt dus.

Martijn22,
Die link kende ik al en bracht even geen uitkomst, denk dat ergens anders in mijn script de oorzaak zit.

dinsdag 27 augustus 2002 12:53

Acties:

edie

Grom schreef op 27 augustus 2002 @ 12:24:
Btw: jouw voorbeeld heb ik veranderd in border:1px solid black;
vraag ik dan document.getElementById( 'test' ).style.borderWidth op dan geeft:
IE ==> 1px (lijkt me logisch ik heb immers maar een waarde opgegeven)
NS ==> 1px 1px 1px 1px (maar zo hoort het lijkt me)
Het werkt dus.

NS lijkt mij het goed doen. De 1px 1px 1px 1px zijn de widths van alle borders.
Wat geeft IE terug als je de borders verschilllend in grootte maakt?

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

dinsdag 27 augustus 2002 14:32

Acties:

Grom

lief hè!

Topicstarter

/me Grom groms and is starting to get grumpy

eddie19,
Allereerst jouw vraag:
Als je met een inline style de borderWidth van elke border anders maakt geeft ie
ook 4 x width op bij alert( document.getElementById( 'test' ).style.borderWidth ) en borderTopWidth, borderColor etc.

Maar
Gebruik je geen inline style maar een sheet dan geven zowel IE als NS lege waarden

Of je nu een class gebruikt of het id om de style met de div te koppelen, maakt niet uit.
Nogmaals: inline gaat dat wel goed.

/me Grom snapt het niet meer en kan er ook niets over vinden.

Hiermee heb ik geëxperimenteerd;

code:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
.klasse{
 border-width : 1px 2px 3px 4px;
 border-style:solid dashed dotted double;
 border-color:red green blue black;
}
-->
</style>
</head>
<body>
<div class="klasse" id="test" style="border-width : 1px 2px 3px 4px; border-color:red green blue black; border-style:solid dashed dotted double;">
Balbalbasfksjfkljfsd
</div>

<span onclick="alert( document.getElementById( 'test' ).style.borderWidth )">Klik</span>

</body>
</html>

Haal die inline maar eens weg en het werkt niet meer

dinsdag 27 augustus 2002 15:21

Acties:

Verwijderd

vaag vaag vaag

heb nog een beetje lopen experimenteren en het lijkt of alle andere styles wel lukken (zowel inline als extern):

width
height
left
top
position

Overal krijg ik een alert terug, behalve bij border

dinsdag 27 augustus 2002 15:54

Acties:

Grom

lief hè!

Topicstarter

Mijn idee, vaag...
Ik ben nog steeds aan het experimenteren maar kom ook niet verder!
Wat ik ook probeer ==> niets!
/me Grom baalt er gruwelijk van!

dinsdag 27 augustus 2002 16:01

Acties:

Verwijderd

En het meest vage van alles is dat zowel IE als Mozilla er precies hetzelfde over denken

En ik krijg ook geen error in de javascript console, dus het gaat goed.. _{maar niet heus}

dinsdag 27 augustus 2002 16:18

Acties:

Grom

lief hè!

Topicstarter

Hoe krijg jij trouwens width met een externe style-sheet (head) aan het werken, zelfs dat lijkt me niet te lukken?

dinsdag 27 augustus 2002 22:56

Acties:

Verwijderd

Alleen in Mozilla dus

behalve dus die border.

met de volgende code;

code:

function bug()
{
  var view = document.defaultView;
  var span = document.getElementsByTagName('span').item(0);
  var style = view.getComputedStyle(span, null);
  alert(style.getPropertyValue('width'));
}

CSS:

code:

<style type="text/css">
span {
    width: 250px; 
    height: 23px; 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    border: 1px #000000 solid;
}

html:

code:

1	span id="test" onClick="bug();">span</span>

woensdag 28 augustus 2002 00:27

Acties:

Verwijderd

Inderdaad, onder Mozilla werkt de getcomputedstyle voor border kennelijk nog niet, maar voor IE zou currentStyle.borderWidth, currentstyle.BorderColor etc wel moeten werken (zelf net getest)

woensdag 28 augustus 2002 00:29

Acties:

Verwijderd

Ook als je de styles extern plaatst? (dus tussen de head tags bijv.)

woensdag 28 augustus 2002 09:01

Acties:

Grom

lief hè!

Topicstarter

Martijn22,

Inderdaad currentStyle werkt in IE (ook met de styles in een sheet) maar niet in MOZ (zie eerste post).

woensdag 28 augustus 2002 10:28

Acties:

Verwijderd

GOT it!! mijn voorbeeld was bijna goed heb wat rondgekeken op Bugzilla en kwam toen iets tegen, met een kleine aanpassing werkt het voorbeeld van boven nu ook in Moz.

code:

1	alert(style.getPropertyValue('border-top-width'));

i.p.v. borderTopWidth

de rest van het script is wel goed

woensdag 28 augustus 2002 13:16

Acties:

Verwijderd

Dat was dus het probleem. Je kunt alleen de stijleigenschappen krijgen van elke afzonderlijke rand (top, bottom etc) in Mozilla. Weet ik dat ook weer.

donderdag 29 augustus 2002 10:16

Acties:

Grom

lief hè!

Topicstarter

Verwijderd schreef op 28 augustus 2002 @ 10:28:
GOT it!! mijn voorbeeld was bijna goed heb wat rondgekeken op Bugzilla en kwam toen iets tegen, met een kleine aanpassing werkt het voorbeeld van boven nu ook in Moz.
code:
1
alert(style.getPropertyValue('border-top-width'));
i.p.v. borderTopWidth de rest van het script is wel goed

Dit is inderdaad een oplossing voor MOZ maar bij mij alert de functie bug 'medium' voor de 'border-top-width' ipv de '1px' waarde.

Ik heb zelf nog even zitten stoeien met document.styleSheets uit mijn eerdere post en heb nu de volgende oplossing:
- IE kent .rules[i]
- Moz kent .cssRules[i]

code:

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function getStijl(){
var stijl= document.styleSheets[0].cssRules ?
           document.styleSheets[0].cssRules[0].style : // Moz
           document.styleSheets['testcss'].rules[0].style ; // IE
alert(stijl.borderTopWidth);
}
// -->
</script>
<style type="text/css" id="testcss">
<!-- 
span{
 width: 100px;
 height: 23px; 
 position: absolute; 
 left: 50px; 
 top: 50px;
 border-width: 5px 2px 3px 4px;
 border-style: solid dashed dotted double;
 border-color: red green blue black;
}
-->
</style>
</head>
<body>

<span id="test" onClick="getStijl()">Klik</span>

</body>
</html>

Nadeel daarvan (imo) is dat ik classes/rules niet bij naam kan aanroepen maar alleen door hun positie in de sheet (0,1,2,3 .. etc).
Ik heb hiervoor ook geen oplossing kunnen vinden op I-net of door experimenteren.

In mijn geval niet zo n probleem maar kan beter

dinsdag 15 maart 2005 08:01

Acties:

marty

Ik heb me een ongeluk lopen zoeken naar hoe ik waardes van elementen uit externe stylesheets kan opvragen (omdat die bij mij ook leeg bleven) en heb het uiteindelijk voor elkaar gekregen met behulp van dit topic. Ik weet dat dit topic nogal oud is, maar hoopte dat andere mensen die hier ook naar op zoek zijn toch wat aan deze toevoeging hebben. Heb het probleem van de laatste post namelijk opgelost.

voorbeeld:

HTML:

<html>
<head>
 <style type="text/css">
 body {
    background-color: #CCC;
    color: 666;
    }
#bla {
    font-size: 24pt;
    }
 </style>
 <script language="javascript" type="text/javascript">
 function getPropValue(name, property)
 {
    for (var i in document.styleSheets)
    {
        if (document.styleSheets[i].cssRules)
        {
            for (var j in document.styleSheets[i].cssRules)
            {
                if (document.styleSheets[i].cssRules[j].selectorText == name)
                {
                    return document.styleSheets[i].cssRules[j].style[property];
                }
            }
        }
        else if (document.styleSheets[i].rules)
        {
            for (var j in document.styleSheets[i].rules)
            {
                if (document.styleSheets[i].rules[j].selectorText == name)
                {
                    return document.styleSheets[i].rules[j].style[property];
                }
            }
        }
    }
 }
 </script>
</head>
<body onLoad="alert(getPropValue('#bla', 'fontSize'));">
<div id="bla">bladibla</div>
</body></html>

zo hoef je ze dus niet meer met nummers aan te spreken, maar kan het gewoon met de naam

[ Voor 16% gewijzigd door marty op 15-03-2005 08:02 ]