Sempre existem muitos problemas de compatibilidade para obter os estilos de cálculo da HTML Elements, e existem algumas diferenças entre os navegadores. O Firefox e o Webkit (Chrome, Safari) suportam o método padrão W3C: getComputedStyle (), enquanto o IE6/7/8 não suporta o método padrão, mas possui atributos privados para implementá -lo: o CurrentStyle, IE9 e o suporte de ópera. Com esses 2 métodos e atributos, a maioria dos requisitos pode ser atendida basicamente.
A cópia do código é a seguinte:
var getStyle = function (elem, tipo) {
retornar 'getcomputedstyle' na janela? getComputedStyle (elem, null) [tipo]: elem.currentstyle [type];
};
No entanto, o uso do CurrentStyle para largura e altura adaptável não pode obter o valor calculado, para que ele possa retornar apenas o automóvel e getComputedStyle () pode retornar o valor calculado. Existem várias maneiras de resolver esse problema. O que eu pensei antes era subtrair o valor do preenchimento usando o cliente de largura/cliente para que a largura e a altura calculadas possam ser obtidas em navegadores que não suportam o método padrão. Alguns dias atrás, eu vi Situ Zhengmei adotar outro método, usando o método getBoundingClientRect () para obter a posição do elemento na página e, em seguida, subtrair direito à esquerda é a largura, o topo de subtração inferior é a altura. Fiz algumas pequenas alterações em seu código, e o código final é o seguinte:
A cópia do código é a seguinte:
var getStyle = function (elem, estilo) {
retornar 'getcomputedstyle' na janela?
getcomputedstyle (elem, null) [estilo]:
função(){
style = style.replace (//-(/w)/g, função ($, $ 1) {
Retornar $ 1.TOUPPERCASE ();
});
var val = elem.currentstyle [estilo];
if (val === 'Auto' && (estilo === "largura" || estilo === "altura")) {
var ret = elem.getBoundingClientRect ();
if (style === "width") {
return ret.right - ret.left + 'px';
}outro{
return ret.bottom - ret.top + 'px';
}
}
retornar val;
} ();
};
// Ligue para este método
var teste = document.getElementById ('teste'),
// Obtenha a largura calculada
twidth = getStyle (teste, 'largura');
Novo problema, se a largura ou altura do elemento usar unidades EM ou %, o valor retornado pelo getComputedStyle () alterará automaticamente em ou % para unidades PX, e o CurrentStyle não o fará. Se o tamanho da fonte o usar como unidades, o 0EM retornado na Opera é realmente assustador!
Mais tarde, encontrei alguns problemas inesperados de compatibilidade em meu uso. Hoje otimizei o código original e lidei com alguns problemas comuns de compatibilidade.
Em JavaScript, "-" (Scribing ou Hyphen) representa um sinal de menos, enquanto em CSS, muitas propriedades de estilo têm esse símbolo, como preenchimento-esquerda, tamanho de fonte, etc., portanto, se o código a seguir aparecer no JavaScript, será um erro:
A cópia do código é a seguinte: elem.style.margin-left = "20px";
A maneira correta de escrever deve ser:
A cópia do código é a seguinte: elem.style.marginleft = "20px";
Aqui você precisa remover a pontuação intermediária do CSS e capitalizar as letras que foram originalmente seguidas pelo meio de pontuação, comumente conhecida como o método de escrita do "estilo de camelo". Seja usando JavaScript para definir ou obter elementos, o estilo CSS deve ser o estilo de camelo. No entanto, muitos novatos familiarizados com o CSS, mas não estão familiarizados com o JavaScript, sempre cometerão esse erro de baixo nível. O uso do uso avançado de substituição pode simplesmente substituir o escore médio no atributo CSS pelo estilo de camelo.
A cópia do código é a seguinte: var newprop = prop.replace (//-(/w)/g, função ($, $ 1) {
Retornar $ 1.TOUPPERCASE ();
});
Para flutuar, é uma palavra reservada em javascript. Existem outras alternativas para definir ou obter o valor flutuante do elemento no JavaScript. É CSSFLOAT em navegadores padrão e Stylefloat no IE6/7/8.
Se não houver valores explícitos para a parte superior, direita, inferior e esquerda, alguns navegadores retornarão um automóvel ao obter esses valores. Embora o valor do Auto seja um valor legal de atributo CSS, não é de forma alguma o resultado que queremos, mas deve ser 0px.
No IE6/7/8, para definir a transparência de um elemento, filtros, como: filtro: alfa (opacidade = 60), para navegadores padrão, basta definir diretamente a opacidade e ambos os métodos de escrita do IE9, também fiz o processamento de compatibilidade para obter a transparência dos elementos. Enquanto você usar opacidade, você pode obter o valor de transparência de todos os elementos do navegador.
Obtendo a largura e a altura do elemento no IE6/7/8 foi introduzido no artigo anterior, para que não o repita aqui. Outra coisa a observar é que, se o estilo de um elemento estiver escrito em linha usando estilo, ou se o atributo de estilo foi definido usando JavaScript, você poderá usar o seguinte método para obter o estilo calculado do elemento:
A cópia do código é a seguinte:
var a altura = elem.style.Height;
Este método é mais rápido do que ler os valores da propriedade no GetComputedStyle ou CurrentStyle e deve ser usado primeiro. Obviamente, o pré -requisito é que o estilo é definido através da redação em linha (usando configurações de JavaScript também está definindo estilos embutidos). O código final otimizado é o seguinte:
A cópia do código é a seguinte:
var getStyle = function (elem, p) {
var rpos = /^(esquerda | direita | superior | inferior) $ /,,,
ecma = "getComputedStyle" na janela,
// converte o escore médio em um padrão de camelo, como: preenchimento-esquerda => paddingleft
p = p.Replace (//-(/w)/g, função ($, $ 1) {
Retornar $ 1.TOUPPERCASE ();
});
// Processar flutuação
p = P === "Float"? (ECMA? "CSSFLOAT": "stylefloat"): P;
retornar !! elem.style [p]?
elem.style [p]:
ECMA?
função(){
var val = getComputedStyle (elem, null) [p];
// lida com a situação em que superior, direita, inferior e esquerda são automáticos
if (rpos.test (p) && val === "Auto") {
retornar "0px";
}
retornar val;
} ():
função(){
var <a href = "http://wirelesscasinogames.com"> wirelesscasinogames.com </a> val = elem.currentstyle [p];
// Obtenha a largura e a altura do elemento no IE6/7/8
if ((p === "largura" || p === "altura") && val === "Auto") {
var ret = elem.getBoundingClientRect ();
return (p === "Width"? Rect.right - Rect.Left: Rect.Bottom - Rect.top) "px";
}
// Obtenha a transparência do elemento no IE6/7/8
if (p === "opacidade") {
var filtro = elem.currentStyle.filter;
if (/opacity/.test(filter)) {
val = filtro.match (// d /) [0] / 100;
return (val === 1 || val === 0)? val.tofixado (0): val.tofixado (1);
}
caso contrário, se (val === indefinido) {
retornar "1";
}
}
// lida com a situação em que superior, direita, inferior e esquerda são automáticos
if (rpos.test (p) && val === "Auto") {
retornar "0px";
}
retornar val;
} ();
};
Aqui está um exemplo de chamada:
A cópia do código é a seguinte:
<estilo>
.caixa{
Largura: 500px;
Altura: 200px;
Antecedentes:#000;
filtro: alfa (opacidade = 60);
Opacidade: 0,6;
}
</style>
<div id = "caixa"> </div>
<Cript>
var box = document.getElementById ("caixa");
alerta (getStyle (caixa, "largura")); // "500px"
alerta (getStyle (caixa, "cor de fundo")); // "rgb (0, 0, 0)" / "#000"
alerta (getStyle (caixa, "opacidade")); // "0,6"
alerta (getStyle (caixa, "flutuador")); // "nenhum"
</script>