Obtener valores de css mediante js

#1 (**permalink**) 28/09/2016, 15:19

Estimados como puedo obtener valores de estilos mediante js.

Lo que sucede es que si tengo este código:

Código HTML:

Ver original<html>
    <head>
        <style>
        *{
        margin:0px;
        padding:0px;
        }
        
        .some_div{
        border-width:1px;
        border-color:#000000;
        border-style:solid;
        position:relative;
        width:680px;
        height:480px;
        margin:78px 0px 0px 44px;
        }
        </style>
        <script type="text/javascript">
        function see(){
        var d = document.getElementById("some_div");
        alert(d.style.width);
        }
        </script>
    </head>
    <body>
        <div class="some_div" id="some_div" onclick="see();">SOME DIV</div>
    </body>
<html>

No me toma el width.

¿Cómo debo hacerlo?

mpozo · #2 (**permalink**) 28/09/2016, 16:19

Éste tema se trató hace unos días. En tu caso en lugar de usar offsetHeight o clientHeight, que sirve para obtener el alto, debes usar offsetWidth o clientWidth
[URL="http://www.forosdelweb.com/f13/modificar-altura-div-con-js-1155214/#post4804966"]http://www.forosdelweb.com/f13/modificar-altura-div-con-js-1155214/#post4804966[/URL]

Alexis88 · #3 (**permalink**) 29/09/2016, 13:53

Para obtener el valor de cualquier propiedad CSS mediante JavaScript, debes utilizar el método .getComputedStyle().

mpozo · #4 (**permalink**) 29/09/2016, 14:51

Tienes razón, pudiera ser que se refiera al css computado. Se me pasó

Hasta ahora no había visto un ejemplo tan malo en la mdn. ¿Tanto les hubiera costado algo como esto?

Código Javascript:

Ver originaldocument.defaultView.getComputedStyle(d, "null")["width"];
window.getComputedStyle(d, "null")["width"];

#5 (**permalink**) 29/09/2016, 15:09

Cita:

Iniciado por mpozo

Tienes razón, pudiera ser que se refiera al css computado. Se me pasó

Hasta ahora no había visto un ejemplo tan malo en la mdn. ¿Tanto les hubiera costado algo como esto?

Código Javascript:

Ver originaldocument.defaultView.getComputedStyle(d, "null")["width"];
window.getComputedStyle(d, "null")["width"];

Buenas, me funciona, pero no para todas las propiedades, por ejemplo probe position y todo bien, pero por ejemplo margin, no me muestra nada.

Quedo atento.

mpozo · #6 (**permalink**) 29/09/2016, 16:48

El método getcomputerstyle() retorna un objeto CSSStyleDeclaraton, el cual no posee la propiedad margin como tal. Para acceder a dicha propiedad has de hacerlo por separado

Código CSS:

Ver originalmargin-top
margin-left
margin-bottom
margin-right

Esto que te explico, puedes verlo si ejecutas

Código Javascript:

Ver originalwindow.getComputedStyle(d, "null")

Alexis88 · #7 (**permalink**) 30/09/2016, 00:28

En realidad, sí puedes acceder a la propiedad shorthand margin y obtener los valores establecidos.

Código Javascript:

Ver originalgetComputedStyle(elemento).margin

DEMO

mpozo · #8 (**permalink**) 30/09/2016, 14:13

Cita:

Iniciado por Alexis88

En realidad, sí puedes acceder a la propiedad shorthand margin y obtener los valores establecidos.

Código Javascript:

Ver originalgetComputedStyle(elemento).margin

[URL="https://jsfiddle.net/Alexis88/ng7c2vms/"]DEMO[/URL]

¿Y qué hacemos con los navegadores FireFox e Internet Explorer? Por no hablar de los navegadores para dispositivos móviles

Código Javascript:

Ver originalconsole.log(getComputedStyle(div).margin); // vacío
console.log(getComputedStyle(div).margin-top); // NAN
console.log(getComputedStyle(div)['margin-top']); // 3px

Alexis88 · #9 (**permalink**) 30/09/2016, 16:25

La mayoría de las versiones de los principales navegadores ofrecen soporte para ese método. En el caso de IE menor a la versión 9 (que sí ofrece el soporte necesario), debes usar el método .currentStyle().

Por cierto, para casos de propiedades con guiones de por medio, debes usar la forma de escritura camelCase:

Código Javascript:

Ver originalconsole.log(getComputedStyle(div).marginTop);

mpozo · #10 (**permalink**) 01/10/2016, 07:02

Cita:

Iniciado por Alexis88

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

En realidad, sí puedes acceder a la propiedad shorthand margin y obtener los valores establecidos.

Código Javascript:

Ver originalgetComputedStyle(elemento).margin

[URL="https://jsfiddle.net/Alexis88/ng7c2vms/"]DEMO[/URL]

Creo que no te has parado a probarlo

Código Javascript:

Ver originalconsole.log(getComputedStyle(div).margin); // vacío
console.log(getComputedStyle(div)['margin-top']); // 3px
console.log(getComputedStyle(div).border); // vacío
console.log(getComputedStyle(div)['border']); // vacío
console.log(getComputedStyle(div)['border-width']); // vacío
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

Alexis88 · #11 (**permalink**) 01/10/2016, 08:31

Cita:

Iniciado por mpozo

¿Quién ha puesto en duda el soporte del método getComputedStyle? Yo, desde luego no.

Cita:

Iniciado por mpozo

¿Y qué hacemos con los navegadores FireFox e Internet Explorer? Por no hablar de los navegadores para dispositivos móviles

Y la solución práctica para las propiedades shorthand en FF e IE —que no son parte del problema planteado por alvaro_trewhela—, se solucionan escribiendo las propiedades mediante la notación por puntos o brackets o utilizando la forma de escritura camelCase. También se puede construir una función cross-browser o usar una existente, pero eso ya dependerá de la necesidad del usuario.

mpozo · #12 (**permalink**) 01/10/2016, 11:17

¿Sabes? Llevo en esto poco tiempo y por esa razón tomas referentes. Gente que parecen saber de lo hablan (tú, isabelM, Caricatos, etc) y los sigues. Parte de este reconocimiento se basa en el hecho de que se reconozcan los errores cometidos por desconocimiento, lapsus o mala interpretación. Hacer juegos de trileros no hace que incremente ese reconocimiento. De hecho, ocurre justamente lo contrario, se pasa de ser un referente, a alguien que es un cero a la izquierda.

En este post has cometido un error que he puesto de manifiesto y, en lugar de reconocerlo o dejarlo estar, intentas esconderlo, retorciendo, estrujando y estirando. Pero lo que es, es.

Cita:

Iniciado por Alexis88

Y la solución práctica para las propiedades shorthand en FF e IE —que no son parte del problema planteado por alvaro_trewhela—,

Cita:

Iniciado por alvaro_trewhela

Buenas, me funciona, pero no para todas las propiedades, por ejemplo probe position y todo bien, pero por ejemplo margin, no me muestra nada.

Quedo atento.

se solucionan escribiendo las propiedades mediante la notación por puntos o brackets o utilizando la forma de escritura camelCase.
¿De qué estás hablando?

Código Javascript:

Ver originalconsole.log(getComputedStyle(div).margin); // vacío
console.log(getComputedStyle(div)['margin']); // vacío
Evidentemente la estructura de escritura camelCase no se puede usar en la abreviatura

Cita:

Iniciado por Alexis88

También se puede construir una función cross-browser o usar [URL="https://jsfiddle.net/Alexis88/7twrrqks/"]una existente[/URL], pero eso ya dependerá de la necesidad del usuario.
¿Qué necesidad hay de ello?. Es una manera absurda de mal gastar recursos

Alexis88 · #13 (**permalink**) 01/10/2016, 20:02

Estimado mpozo:

Me parece que has llevado esto a un plano personal de manera innecesaria. Aquí nadie pretende demostrar saber más que los demás ni de dejar mal parado a los demás, pues esto no se trata de competir sino de ayudarnos unos a otros. En ningún momento he intentado "esconder" errores. He respondido a las dudas y preguntas formuladas, tal cual lo vengo haciendo desde hace ya algunos años.

Por otra parte, esto que dices, sí es un error:

Cita:

Iniciado por mpozo

Evidentemente la estructura de escritura camelCase no se puede usar en la abreviatura

¿Y sabes por qué? Porque sí se puede.

Código Javascript:

Ver originalconsole.log(getComputedStyle(div).marginTop);
console.log(getComputedStyle(div).marginLeft);
console.log(getComputedStyle(div).marginBottom);
console.log(getComputedStyle(div).marginRight);
 
console.log(getComputedStyle(div).borderBottomWidth);
console.log(getComputedStyle(div).borderBottomColor);
console.log(getComputedStyle(div).borderBottomStyle);

DEMO

Si deseas, pruébalo en todos los navegadores que den soporte al método en cuestión. Por cierto, las funciones cross browser o polyfill, jamás significarán una "manera absurda de gastar recursos". Incluso la propia MDN añade funciones polyfill en su documentación para lograr un nivel de abstracción tal que se pueda abarcar a todos los navegadores posibles.

Y, por favor, si vas a comentar en este foro, evita tomar una réplica como algo personal. Es absurdo el siquiera pensarlo. Recuerda que esta es una página de asesoramiento, en donde los usuarios nos apoyamos; las competencias están en otra parte.

Un saludo

mpozo · #14 (**permalink**) 04/10/2016, 11:40

De nuevo, y ya no sé cuantas veces van, yerras.

Las propiedades shorthand (abreviadas, contraídas o como quieras llamarlas) son aquellas que sirven para abreviar propiedades que tienen la misma raíz

margin es una propiedad abreviada de

margin-top
margin-right
margin-bottom
margin-left

padding es una propiedad abreviada de

padding-top
padding-right
padding-bottom
padding-left

font es una propiedad abreviada de

font-size
font-weight
etc..

Creo que con esto ya tendrás claro que son las propiedades shorthand. Por ende no pueden ser escritas en camelCase

Por otro lado, mal interpretas lo referido a las polyfill. Tomas como absolutas unas palabras que sólo se circunscriben al ámbito de este tema. Las polyfill vienen a suplir las deficiencias/carencias de algún navegador o versiones del mismo. Lo que no tiene ningún sentido es usarla en el contexto en el que estamos (obtener el css computado de una propiedad shorthand o no). De ahí que dijera y me reafirmo, por que ha quedado claro desde hace ya bastantes post << ¿Qué necesidad hay de ello?. Es una manera absurda de mal gastar recursos >>

Todo esto, dicho sin ninguna acritud o llevándolo al plano persona. Simplemente intento se didactico dentro de mis exiguos conocimientos.

Alexis88 · #15 (**permalink**) 04/10/2016, 14:44

Deberías leer los mensajes completos antes de siquiera atreverte a refutar.

Como tengo paciencia, voy a aclarar los puntos importantes de esta discusión:

1. Cuando mencionaste esto:

Cita:

Iniciado por mpozo

¿Y qué hacemos con los navegadores FireFox e Internet Explorer? Por no hablar de los navegadores para dispositivos móviles

Te respondí esto:

Cita:

Iniciado por Alexis88

La mayoría de las versiones de los principales navegadores ofrecen soporte para ese método. En el caso de IE menor a la versión 9 (que sí ofrece el soporte necesario), debes usar el método .currentStyle().

A lo cual respondiste contradiciendo a lo primero que dijiste:

Cita:

Iniciado por mpozo

¿Quién ha puesto en duda el soporte del método getComputedStyle? Yo, desde luego no.

Y fue a partir de ese momento en el que perdiste el control y arremetiste contra mí de forma lamentable.

2. Cuando mencioné el tema de la escritura camelCase, fue por esto:

Cita:

Iniciado por Alexis88

Por cierto, para casos de propiedades con guiones de por medio, debes usar la forma de escritura camelCase:

Y ya luego te la pasaste tocando ese punto insulsamente, siendo la parte más cómica el colocar ese ejemplo de propiedades shorthand, intentando consciente o inconscientemente minimizarme. De verdad, qué ridículo.

Todo lo que se generó por no detenerte a leer lo que respondí. Lo peor de todo es la intención con la cual respondiste.

Una vez más te lo digo: en esta página, nadie tiene la intención de demostrar saber más que el resto. Nadie viene a competir en Foros del Web. El fin del foro es brindar desinteresadamente el apoyo que los usuarios solicitan, aprendiendo —al mismo tiempo— unos de otros. Eso es todo.

Ojalá cambies esa actitud; recuerda que aquí no tienes enemigos. Por mi parte, no pienso perder más el tiempo en una discusión innecesaria.

Un saludo

mpozo · #16 (**permalink**) 04/10/2016, 16:51

Vaya, además de no admitir cometer errores, de descontextualizar coscientemente, interpretar intenciones, ahora también me achacas, justamente lo que tú ha hecho, no leer antes de responder

Si a estas alturas no he logrado que lo entiendas, ya no voy a lograrlo.

PD: Si te he ofendido en algo, no ha sido mi intención, ni de lejos.

#17 (**permalink**) 04/10/2016, 20:05

Ufff.... Muchas gracias por todas las respuestas, voy a probarlas. ahí cuento como me fue.

Saludos