detectar verdadeira fronteira, preenchimento e margem de Javascript

StackOverflow https://stackoverflow.com/questions/349257

Pergunta

Existe uma maneira de detectar a fronteira verdadeira, preenchimento e margem de elementos de código Javascript? Se você olhar para o seguinte código: 

<html>
    <head>
        <style>
        <!--
        .some_class {
            padding-left: 2px;
            border: 2px solid green;
        }   
        -->
        </style>
        <script>
        <!--
        function showDetails()
        {
            var elem = document.getElementById("my_div");
            alert("elem.className=" + elem.className);
            alert("elem.style.padding=" + elem.style.padding);
            alert("elem.style.paddingLeft=" + elem.style.paddingLeft);
            alert("elem.style.margin=" + elem.style.margin);
            alert("elem.style.marginLeft=" + elem.style.marginLeft);
            alert("elem.style.border=" + elem.style.border);
            alert("elem.style.borderLeft=" + elem.style.borderLeft);
        }
        -->
        </script>
    </head>
    <body>
        <div id="my_div" class="some_class" style="width: 300px; height: 300px; margin-left: 4px;">
            some text here
        </div>
        <button onclick="showDetails();">show details</button>
    </body>
</html>

você pode ver, se você clicar no botão, que o preenchimento não é relatada direita. Somente as propriedades definidas diretamente através de "estilo" são relatadas, os definidos através de uma classe CSS não são relatados.

Existe uma maneira de obter de volta os valores finais dessas propriedades? Quero dizer os valores obtidos após todas as definições de estilo CSS são calculadas e aplicadas pelo browser.

Foi útil?

Solução

É possível, mas é claro, cada navegador tem a sua própria implementação. Felizmente, PPK tem feito todo o trabalho duro para nós:

http://www.quirksmode.org/dom/getstyles.html

Outras dicas

a propriedade style pode obter os estilos que são atribuídos em linha como

<div id="target" style="color:#ddd;margin:10px">test</div> se você deseja obter os estilos atribuídos no exterior elemento arquivo css ou <style/>, tente o seguinte: 

var div = document.getElementById("target");
var style = div.currentStyle || window.getComputedStyle(div);
display("Current marginTop: " + style.marginTop);

Se você estiver usando jQuery, @vsync 's solução é bom.

Com jQuery: 

var $elm = $('.box');
var hPadding = $elm.outerWidth() - $elm.width();
var vPadding = $elm.outerHeight() - $elm.height();
var hBorder = $elm.outerWidth() - $elm.innerWidth();
var vBorder = $elm.outerHeight() - $elm.innerHeight();

console.log("Horizontal padding & border: ", hPadding);
console.log("Vertical padding & border: ", vPadding);
console.log("Horizontal border: ", hBorder);
console.log("Vertical border: ", vBorder);
.box{ 
  width: 50%;
  padding:10vw; 
  border:10px solid red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>

O seu caminho (mas você tem que paddingLeft estado, paddingRight..not apenas 'padding'): 

var elm = $('.box');
console.log("padding left (PX): ", elm.css("paddingLeft"));
.box { 
  padding:0 50px 0 5vw; 
  border: 2px solid green; 
  width: 300px; 
  height: 300px; 
  margin-left: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">some text here</div>

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top