Можно ли посмотреть свойства элемента если у него не заданы стили?

Да, посмотреть свойства элемента можно всегда, даже если у него не заданы явные стили

Это фундаментальный принцип работы браузеров — каждый элемент DOM всегда имеет полный набор вычисленных стилей (computed styles), независимо от того, заданы ли ему явные CSS-правила.

Почему стили есть всегда?

Браузер применяет к каждому элементу несколько слоёв стилей по умолчанию:

1. User Agent Stylesheet — встроенные стили браузера (размеры заголовков, отступы списков, цвет текста)
2. Наследованные стили (inherited styles) — свойства вроде font-family или color, которые передаются от родительских элементов
3. Стили по умолчанию CSS — начальные значения всех CSS-свойств, определённые спецификацией

Как посмотреть свойства элемента?

1. Через DevTools в браузере

Наиболее удобный способ — использовать инструменты разработчика:

// Получение всех вычисленных стилей элемента через JavaScript
const element = document.getElementById('myElement');
const computedStyles = window.getComputedStyle(element);

// Получение конкретного свойства
const displayValue = computedStyles.getPropertyValue('display');
const marginTop = computedStyles.marginTop;

// Вывод всех свойств в консоль
console.log(computedStyles);

2. Прямо в панели Elements

В Chrome/Edge/Firefox:

• Открыть DevTools (F12)
• Выбрать вкладку Elements
• Кликнуть на элемент
• Перейти на вкладку Computed — здесь показаны все итоговые стили элемента

3. Через консоль DevTools

// Быстрый просмотр всех стилей
getComputedStyle(document.querySelector('p'))

// Фильтрация наследуемых свойств
const styles = getComputedStyle(element);
const nonInherited = [];
const inherited = [];

for (let i = 0; i < styles.length; i++) {
    const prop = styles[i];
    const value = styles.getPropertyValue(prop);
    
    if (value !== 'inherit') {
        nonInherited.push(`${prop}: ${value}`);
    }
}

Какие свойства видны?

Даже для элемента без явных стилей вы увидите:

• Блочная модель: display, width, height, margin, padding, border
• Типографика: font-family, font-size, line-height, color
• Позиционирование: position, float, clear
• Визуальные: visibility, opacity, background-color
• CSS-переменные: все доступные custom properties

Пример элемента без стилей

Рассмотрим простой HTML-элемент:

<div id="plainDiv">Простой текст</div>

Даже без CSS у него будут такие вычисленные свойства:

display: block;            /* из user agent stylesheet */
width: auto;              /* начальное значение по спецификации */
height: auto;             /* начальное значение */
margin: 8px 0;           /* зависит от браузера */
color: inherit;          /* наследует от body */
font-family: sans-serif; /* браузерный шрифт по умолчанию */

Важные нюансы

1. Различия между style и getComputedStyle()

const div = document.createElement('div');

// Вернёт пустую строку — только inline-стили
console.log(div.style.backgroundColor); // ""

// Вернёт реальное значение (часто 'rgba(0, 0, 0, 0)')
console.log(getComputedStyle(div).backgroundColor);

1. Различия браузеров — user agent stylesheet отличается в Chrome, Firefox, Safari

2. Каскадность — браузер всегда вычисляет итоговое значение, применяя каскад, наследование и специфичность селекторов

Практическое применение

Понимание этого механизма критично для:

• Отладки верстки — когда элемент выглядит не так, как ожидается
• Динамических манипуляций — изменение стилей через JavaScript
• Анимаций и переходов — работа с начальными и конечными состояниями
• Тестирования — проверка корректности применения стилей

Вывод: Каждый DOM-элемент всегда имеет полный набор вычисленных стилевых свойств. Отсутствие явных CSS-правил не означает отсутствие стилей вообще — браузер всегда предоставляет значения по умолчанию, которые можно и нужно исследовать при разработке.