Valores CSS herdadas via JavaScript
-
19-09-2019 - |
Pergunta
Na minha página eu estou mudando alguns estilos css via JavaScript. Quando eu tentar puxar um valor que foi herdada - ele vem para cima em branco. Considere o seguinte:
.Sliding
{
display: none;
overflow: hidden;
}
.Sliding #FilterBox
{
height: 185px;
background-color: Fuchsia;
}
E o html:
<div class="Sliding" id="FilterBox">
<h3>Test Form</h3>
This is a test/<br />
12345
</div>
Se eu olhar para o elemento ' document.getElementById (objname) .style.display ' sua em branco? Como posso ler o valor de exibição via via javascript?
Solução
Você vai querer usar getComputedStyle .
A propriedade .style
é um meio de acesso e configuração de estilo inline (ou seja, como o atributo de estilo).
Note, no entanto, que o seu exemplo não tem nada a ver com a herança. Apenas conjuntos de regras que se aplicam diretamente para os elementos que você está interessado. A herança é quando um elemento assume o mesmo estilo como seu pai via a palavra-chave inherit
.
span {
color: inherit;
}
getComputedStyle dará o valor calculado final, embora, por isso vai pegar valores herdados também.
Outras dicas
Sua segunda regra CSS:
.Sliding #FilterBox
{
height: 185px;
background-color: Fuchsia;
}
irá corresponder a qualquer coisa com id "FilterBox" que é um descendente de qualquer coisa com uma classe "Deslizando", pelo que esta regra não se aplica à sua div.
E para obter o estilo computadorizada, pode referir-se a resposta de Fabien, ou considerar o uso de jQuery, o que torna este material muito mais fácil:
usando jQuery, $ ( "# FilterBox"). Css ( "display") retornaria o valor atual para "display".
Você precisa olhar para o estilo computadorizada, ver aqui
if (!window.getComputedStyle)
{
window.getComputedStyle = function(el, pseudo)
{
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop == 'float')
prop = 'styleFloat';
if (re.test(prop))
{
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
}
return this;
}
}
function GetCompStyle()
{
var compStyle = window.getComputedStyle(document.getElementById('FilterBox'), "");
alert(compStyle.getPropertyValue("display"));
}