Hvordan læser man padding og margin fra javascript.
Hej !.Hvis man har en div, med diverse styles herunder border, margin og padding. Hvordan kan man så fra javascript dynamisk læse hvad disse styles er.
Styles er jo write only.
Border kan jeg læse vha. offsetHeight - clientHeight har jeg fundet ud af.
Men hvad med padding og margin ?
Nedenfor er copy pastet noget kode som kan ilustrer problemet.
Altså spørsmål hvad skal der stå i function read2(), så at den kan læse pixel bredden af margin og padding (evt sammenlagt).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<style type="text/css">
.divStyle1
{
padding:0px;
margin:0px;
border-style:solid;
border-width:10px;
border-color:red;
position:absolute;
left:10px;
top:80px;
width:100px;
height:100px;
}
.divStyle2
{
background-color:blue;
padding:6px;
margin:6px;
border-style:solid;
border-width:0px;
border-color:red;
position:absolute;
left:10px;
top:220px;
width:100px;
height:100px;
}
</style>
<script>
function read()
{
div1obj = document.getElementById('div1');
div1HoriBorderWidth = div1obj.offsetWidth - div1obj.clientWidth;
div1VertBorderWidth = div1obj.offsetHeight - div1obj.clientHeight;
alert("div1 har border bredder ialt: " + div1HoriBorderWidth + " og " + div1VertBorderWidth);
}
function read2()
{
alert("Hvilken margin og padding breder har div2 ?");
}
</script>
<BODY>
<button onclick="read()">read</button>
<button onclick="read2()">read2</button>
<div id="div1" class="divStyle1"></div>
<div id="div2" class="divStyle2"></div>
</BODY>
</HTML>
