Управление HTML DOM с ванильным JavaScript

Авторизоваться

Функция ниже возвращает значение по умолчанию CSS property для данного tagName:

const getDefaultProperty = function(tagName, property) {
    // Create new element
    const ele = document.createElement(tagName);

    // Append to the body
    document.body.appendChild(ele);

    // Get the styles of new element
    const styles = window.getComputedStyle(ele);

    // Get the value of property
    const value = styles.getPropertyValue(property);

    // Remove the element
    document.body.removeChild(ele);

    // Return the value of property
    return value;
};

Хорошо бы знать

Метод getComputedStyle() возвращает живые стили данного элемента. Это означает, что он обновляется автоматически, если стили элементов изменены.

Вот почему нам нужно получить значение свойства перед удалением элемента. Следующий код не возвращает правильное значение:

...
const styles = window.getComputedStyle(ele);
document.body.removeChild(ele);

// Always return "" because the element is already 
// removed from the document
return styles.getPropertyValue(property);

Мы можем использовать его, например, чтобы получить размер шрифта тега div по умолчанию:

getDefaultProperty('div', 'font-size');

// Or
getDefaultProperty('div', 'fontSize');

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?

Хорошо бы знать