A ver, algunos básicos de la Programación Orientada a Objetos y su implementación en JavaScript.
Notación punto
El punto es, en realidad, un operador, llamado operador punto, parte de la notación punto.
La página Objects in JavaScript dice:
this dot notation is how JavaScript grants access to the data inside an object. The dot (.) is simply an operator that sits between its operands, just like + and -.
Mi traducción libre:
esta notación punto es cómo JavaScript permite el acceso a los datos dentro de un objeto. El punto (.) es simplemente un operador que se encuentra entre sus operandos, al igual que + y -.
Miembros del objeto
Por otro lado, estos datos que están dentro de un objeto, en POO no suelen llamarse variables, sino miembros del objeto. También se utiliza el término propiedad, que usualmente implica que se está accediendo a un miembro a través de getters y setters que son métodos que se ejecutan al leer o asignar un valor.
Al final, claro que son variables, en el sentido que a través de un identificador accedemos a la memoria que las contiene, pero hablar de miembros o de propiedades permite comunicar con claridad que se trata de partes de un objeto.
Objetos compuestos
Es bastante común que los miembros de un objeto sean, a su vez, objetos. Es decir, libremente se pueden tener miembros con datos primitivos, como enteros, o cadenas de caracteres, así como miembros que son, a su vez, objetos (o interfaces, que quedan fuera del alcance de esta respuesta). Cuando tienes un objeto que tiene miembros de tipo objeto, se dice que es un objeto compuesto.
Así, también es común acceder a los miembros de un objeto compuesto encadenando con el operador punto entre un objeto raíz y sus miembros y sub-miembros que son objetos, hasta llegar al dato deseado, por ejemplo, leer su valor con algo como:
miVariable = miObjeto.miPropiedad.miSubPropiedad.miSubSubPropiedad
Variables de tipo objeto
En la redacción de tu pregunta se nota que hay cierta confusión entre variables y objetos, como si no fueran lo mismo.
Lo cierto es que usualmente usamos variables para acceder a los objetos. Es decir, podemos tener variables con datos simples y variables con objetos (esto es un poco más profundo, pues habría que hablar de referencias y otras yerbas, pero lo mantendremos simple en esta respuesta).
Por ejemplo:
miVariable = 5; //variable con un número
miVariable2 = {nickname: "jachguate", nombre: "Juan Antonio", direccion: {ciudad: "Guatemala", pais: "Guatemala"} }
console.log("numero", miVariable);
console.log("ciudad", miVariable2.direccion.ciudad);
console.log("direccion", miVariable2.direccion);
En lenguajes más estrictos, hay una clara definición para Clase y Objeto, que son las instancias que existen en memoria de una clase.
Tu ejemplo:
Por otro lado, todo lo estándar suele estar bien documentado en JavaScript. Así, la documentación de Document
dice:
La interfaz Document representa cualquier página web cargada en el navegador y sirve como punto de entrada al contenido de la página web, que es el árbol DOM (Document Object Model).
Cuándo escribimos document
estamos accediendo a un objeto que implementa la interfaz Document
.
Lamentablemente hasta aquí podemos llegar, pues, como puedes ver en la documentación, Document
no tiene un miembro llamado style
.
Si tratamos de accederlo, obtenemos undefined, o un error, como se muestra en los ejemplos siguientes:
console.log(document.style);
//esto generará un error:
console.log(document.style.width);
Cómo aprender más
La teoría de objetos, el paradigma de programación orientada a objetos, son temas profundos que no se aprenden en un día. Hay muchos libros, artículos, videos.
Mi recomendación es que leas en investigues. Aquí hay muchos términos que te pueden llevar a un mar de información.
Mi sugerencia siempre son libros, por encima de otros recursos, pues suelen ser más ordenados y te llevan paso a paso por los temas importantes, pero depende de tu nivel de interés y de posibilidades. Esto no es nada más que una pequeña introducción.
style
es un objeto más, igual que todo lo demás :)