9

Tengo un código algo así:

.position{
 position:relative
}
<div class="position" id="position"></div>
document.getElementById('position').style.position

Resultado es " "

Pero si lo pongo directamente en el HTML

<div id="position" style="position:absolute"></div>

Resultado es "absolute".

Ya he hecho que se ejecute el JS cuando el documento halla cargado con DOMContentLoaded

Quisiera saber el porque, muchas gracias!

2
  • 2
    Hola, bienvenido, te sugiero hacer el recorrido de bienvenida para que tengas una mejor idea sobre el funcionamiento de la pagina. +1 por haber explicado tu problema de forma correcta. Commented el 13 sept. 2019 a las 17:22
  • Tienes un error cuando aplicas la clase. No es clase="position", en realidad debes usar class="position"
    – Marcos
    Commented el 13 sept. 2019 a las 17:24

2 respuestas 2

12

Si necesitas obtener los estilos aplicados "en línea" a un elemento, puedes usar element.style.

Pero, si necesitas obtener los estilos aplicados con CSS y "en línea" a un elemento, puedes usar window.getComputedStyle()

Ejemplo:

let element = document.getElementById('element');
let compStyles = window.getComputedStyle(element);

console.log('Element postion = ', compStyles.getPropertyValue('position'))
console.log('Element z-index = ', compStyles.getPropertyValue('z-index'))
.position {
  position: relative;
}
<div class="position" id="element" style="z-index: 1"></div>

1

sugiero que lo hagas con JQuery ya que facilita mas el proceso de esta forma

function cambiarPosicion(){
if($("#position").css("position") == "relative"){
  $("#position").css("position","absolute");
  $("#position").html("Posicion absoluta");
  $("#position").css("left","200px");
}else{
  $("#position").css("position","relative");
  $("#position").html("Posicion relativa");
  $("#position").css("left","0px");
}
}
#position{
    position:relative;
}
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="position">Posicion Relativa</div>

<button onclick="cambiarPosicion()">Cambiar posicion</button>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.