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. el 13 sep. 2019 a las 17:22
  • Tienes un error cuando aplicas la clase. No es clase="position", en realidad debes usar class="position"
    – Marcos
    el 13 sep. 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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