Ver Mensaje Individual
  #10 (permalink)  
Antiguo 01/10/2016, 07:02
mpozo
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 9 años, 1 mes
Puntos: 86
Respuesta: Obtener valores de css mediante js

Cita:
Iniciado por Alexis88 Ver Mensaje
La mayoría de las versiones de los principales navegadores [URL="http://caniuse.com/#feat=getcomputedstyle"]ofrecen soporte para ese método[/URL]. En el caso de IE menor a la versión 9 (que sí ofrece el soporte necesario), debes usar el método [URL="https://developer.mozilla.org/es/docs/Web/API/Element/currentStyle"][inline].currentStyle()[/inline][/URL].
¿Quién ha puesto en duda el soporte del método getComputedStyle? Yo, desde luego no.

Centrando el tema de nuevo. Lo que se está dirimiendo, en este caso, es el modo de acceder al computado de la propiedad margin. Tanto Firefox como Internet Explorer no soportan el acceso a propiedades abreviada (margin, padding, border, etc). Para estos navegadores es necesario ser más especifico y usar sus propiedades individuales (margin-top, padding-right, border-left-width, etc).

Cita:
Iniciado por Alexis88 Ver Mensaje
En realidad, sí puedes acceder a la propiedad shorthand margin y obtener los valores establecidos.

Código Javascript:
Ver original
  1. getComputedStyle(elemento).margin
[URL="https://jsfiddle.net/Alexis88/ng7c2vms/"]DEMO[/URL]

Creo que no te has parado a probarlo

Código Javascript:
Ver original
  1. console.log(getComputedStyle(div).margin); // vacío
  2. console.log(getComputedStyle(div)['margin-top']); // 3px
  3. console.log(getComputedStyle(div).border); // vacío
  4. console.log(getComputedStyle(div)['border']); // vacío
  5. console.log(getComputedStyle(div)['border-width']); // vacío
  6. console.log(getComputedStyle(div)['border-right-width']); // 1px

Me corrijo a mi mismo con respecto al objeto CSSStyleDeclaration, cuando en un post anterior dije que no poseía la propiedad margin. Sí está en el objeto, pero con un valor vacío. Lo que viene a reafirmar lo anteriormente dicho