|
Categorieën >
JavaScript
Opvragen van automatische margin
|
|
|
offline
|
Nieuw lid
|
Ik heb een div die gecentreerd wordt door met CSS
margin-left: auto;
margin-right: auto;
margin-left: auto; margin-right: auto;
te gebruiken. Nu wil ik een plaatje tegen de rand van die div aanplakken, maar daarvoor heb ik de afstand van de linkerkant van de pagina tot de linkerrand van de div nodig. Ik dacht dat ik dit zou kunnen opvragen met
document.mijndiv.style.marginLeft
document.mijndiv.style.marginLeft
, maar die is leeg, waarschijnlijk doordat ik een automatische margin gebruik.
Mijn vraag: hoe vraag ik de automatisch gegenereerd margin alsnog op? |
2 antwoorden
|
|
|
offline
|
JS gevorderde
|
Een automatisch gegenereerde margin kan je helaas niet op halen, de optie welke het mogelijk maakt om de margin in te lezen; Dus style.margin wordt toegepast op inline style definities en dus geen CSS styles. De css stijlen zijn ook in te lezen via javascript maar dit zal jou in dit geval ook geen goed doen, aangezien deze auto(o.i.d.) zal retourneren.
Een optie zou zijn de afbeelding aan de div toe te voegen een een negatieve margin mee te geven. Dus iets in de trant van:
#a, #b {
width : 200px;
border : 1px solid red;
}
#a {
margin : 10px auto 10px auto;
}
#b {
float : left;
margin : -1px 0 0 -202px;
}
#a, #b { width : 200px; border : 1px solid red; } #a { margin : 10px auto 10px auto; } #b { float : left; margin : -1px 0 0 -202px; }
<div id="a">A
<div id="b">B</div>
</div>
<div id="a">A
<div id="b">B</div>
</div>
|
|
|
|
offline
|
Crew algemeen
|
Even copy-pasta van een willekeurige site.
function getStyle(el, style){
if(!document.getElementById) return;
var value = el.style[style];
if(!value)
if(document.defaultView)
value = document.defaultView.
getComputedStyle(el, "").getPropertyValue(style);
else if(el.currentStyle)
value = el.currentStyle[style];
return value;
}
function toCamelCase(input) {
var ret = input;
while(ret.match(/(-[a-zA-Z])/) != null) {
ret = ret.replace(ret[1], ret[1].toUpperCase().substring(1));
}
alert(getStyle('a', 'margin-left'));
function getStyle(el, style){ if(!document.getElementById) return; var value = el.style[style]; if(!value) if(document.defaultView) value = document.defaultView. getComputedStyle(el, "").getPropertyValue(style); else if(el.currentStyle) value = el.currentStyle[style]; return value; } function toCamelCase(input) { var ret = input; while(ret.match(/(-[a-zA-Z])/) != null) { ret = ret.replace(ret[1], ret[1].toUpperCase().substring(1)); } alert(getStyle('a', 'margin-left'));
|
Dit onderwerp is gesloten.
|
|
|