Меню

Как изменить стили в документе при помощи JavaScript

Фриланс Форумы Помощь в программировании на JavaScript Объекты в JavaScript Как изменить стили в документе при помощи JavaScript

Помечено: ,

В этой теме 2 ответа, 1 участник, последнее обновление  admin 5 мес., 3 нед. назад.

  • Автор
    Сообщения
  • #5315

    admin
    Хранитель

    Как изменить стили в документе при помощи JavaScript. Обычно стилизацию задают в файле стилей CSS. Но на JS есть возможность также стилизовать различные элементы.

  • #5316

    admin
    Хранитель

    Получаем ссылку на объект стилей:

    var style = document.getElementById(id).style;

    Далее можем поменять любой стиль или установить новый стиль для элемента:

    //Пример задания высоты элемента
    style.height=’100px’;

  • #5326

    admin
    Хранитель

    Таблица всех возможных свойств объекта стиля

    alignContent Устанавливает или возвращает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство
    alignItems Задает или возвращает выравнивание для элементов внутри гибкого контейнера
    alignSelf Устанавливает или возвращает трассу для выбранных элементов в гибком контейнере
    animation Сокращенное свойство для всех свойств анимации ниже, кроме свойства animationPlayState
    animationDelay Устанавливает или возвращает, когда начнется анимация
    animationDirection Устанавливает или возвращает, должна ли анимация воспроизводиться в обратном порядке на альтернативных циклах
    animationDuration Задает или возвращает количество секунд или миллисекунд, необходимое анимации для завершения одного цикла
    animationFillMode Устанавливает или возвращает значения, применяемые анимацией вне времени ее выполнения
    animationIterationCount Устанавливает или возвращает количество раз, которое должна воспроизводиться анимация
    animationName Задает или возвращает имя анимации @keyframes
    animationTimingFunction Задает или возвращает кривую скорости анимации
    animationPlayState Устанавливает или возвращает признак запуска или приостановки анимации
    background Устанавливает или возвращает все свойства фона в одном объявлении
    backgroundAttachment Устанавливает или возвращает, является ли фоновое изображение фиксированным или прокручивается со страницей
    backgroundColor Задает или возвращает цвет фона элемента
    backgroundImage Устанавливает или возвращает фоновое изображение для элемента
    backgroundPosition Устанавливает или возвращает начальную позицию фонового изображения
    backgroundRepeat Устанавливает или возвращает способ повтора (плитка) фонового изображения
    backgroundClip Устанавливает или возвращает область рисования фона
    backgroundOrigin Устанавливает или возвращает область позиционирования фоновых изображений
    backgroundSize Устанавливает или возвращает размер фонового изображения
    backfaceVisibility Устанавливает или возвращает, должен ли элемент быть видимым, если он не обращен к экрану
    border Устанавливает или возвращает borderWidth, borderStyle и borderColor в одном объявлении
    borderBottom Устанавливает или возвращает все свойства borderBottom в одном объявлении
    borderBottomColor Задает или возвращает цвет нижней границы
    borderBottomLeftRadius Задает или возвращает форму границы нижнего левого угла
    borderBottomRightRadius Задает или возвращает форму границы нижнего правого угла
    borderBottomStyle Устанавливает или возвращает стиль нижней границы
    borderBottomWidth Задает или возвращает ширину нижней границы
    borderCollapse Устанавливает или возвращает, должна ли граница таблицы быть свернута в одну границу, или нет
    borderColor Задает или возвращает цвет границы элемента (может иметь до четырех значений)
    borderImage Сокращенное свойство для установки или возврата всех свойств borderImage
    borderImageOutset Задает или возвращает значение, на которое область изображения границы выходит за пределы рамки
    borderImageRepeat Задает или возвращает, должна ли граница изображения повторяться, округляться или растягиваться
    borderImageSlice Устанавливает или возвращает внутренние смещения границы изображения
    borderImageSource Задает или возвращает изображение, которое будет использоваться в качестве границы
    borderImageWidth Задает или возвращает ширину границы изображения
    borderLeft Устанавливает или возвращает все свойства borderLeft в одном объявлении
    borderLeftColor Задает или возвращает цвет левой границы
    borderLeftStyle Задает или возвращает стиль левой границы
    borderLeftWidth Задает или возвращает ширину левой границы
    borderRadius Сокращенное свойство для установки или возврата всех четырех свойств borderRadius
    borderRight Устанавливает или возвращает все свойства borderRight в одном объявлении
    borderRightColor Задает или возвращает цвет правой границы
    borderRightStyle Задает или возвращает стиль правой границы
    borderRightWidth Задает или возвращает ширину правой границы
    borderSpacing Устанавливает или возвращает пространство между ячейками в таблице
    borderStyle Задает или возвращает стиль границы элемента (может иметь до четырех значений)
    borderTop Устанавливает или возвращает все свойства borderTop в одном объявлении
    borderTopColor Задает или возвращает цвет верхней границы
    borderTopLeftRadius Задает или возвращает форму границы верхнего левого угла
    borderTopRightRadius Задает или возвращает форму границы верхнего правого угла
    borderTopStyle Задает или возвращает стиль верхней границы
    borderTopWidth Задает или возвращает ширину верхней границы
    borderWidth Задает или возвращает ширину границы элемента (может иметь до четырех значений)
    bottom Устанавливает или возвращает нижнее положение позиционированного элемента
    boxDecorationBreak Задает или возвращает поведение фон и границы элемента на странице-брейк, или, в линии, в линии-брейк.
    boxShadow Прикрепляет одну или несколько теней к коробке
    boxSizing Позволяет определить определенные элементы, которые будут соответствовать области определенным образом
    captionSide Устанавливает или возвращает положение заголовка таблицы
    clear Устанавливает или возвращает положение элемента относительно плавающих объектов
    clip Задает или возвращает часть позиционируемый элемент
    color Устанавливает или возвращает цвет текста
    columnCount Устанавливает или возвращает количество столбцов, на которые должен быть разделен элемент
    columnFill Устанавливает или возвращает способ заполнения столбцов
    columnGap Устанавливает или возвращает разрыв между столбцами
    columnRule Сокращенное свойство для установки или возврата всех свойств columnRule
    columnRuleColor Задает или возвращает цвет правила между столбцами
    columnRuleStyle Устанавливает или возвращает стиль правила между столбцами
    columnRuleWidth Задает или возвращает ширину правила между столбцами
    columns Сокращенное свойство для установки или возврата columnWidth и columnCount
    columnSpan Задает или возвращает количество столбцов, которые должен охватывать элемент
    columnWidth Задает или возвращает ширину столбцов
    content Используется с псевдо-элементами :before и :after для вставки сгенерированного содержимого
    counterIncrement Увеличивает один или несколько счетчиков
    counterReset Создает или сбрасывает один или несколько счетчиков
    cursor Задает или возвращает тип курсора для отображения указателя мыши
    direction Задает или возвращает направление текста
    display Задает или возвращает тип отображения элемента
    emptyCells Устанавливает или возвращает признак отображения границы и фона пустых ячеек
    filter Устанавливает или возвращает фильтры изображения (визуальные эффекты, такие как размытие и насыщенность)
    flex Устанавливает или возвращает длину элемента относительно остальных
    flexBasis Задает или возвращает начальную длину гибкого элемента
    flexDirection Задает или возвращает направление гибких элементов
    flexFlow Сокращенное свойство для свойств flexDirection и flexWrap
    flexGrow Устанавливает или возвращает, насколько элемент будет расти относительно остальных
    flexShrink Устанавливает или возвращает способ сжатия элемента относительно остальных
    flexWrap Устанавливает или возвращает, следует ли переносить гибкие элементы
    cssFloat Устанавливает или возвращает горизонтальное выравнивание элемента
    font Задает или возвращает свойство fontstyle, fontVariant, свойство fontweight, размер шрифта, свойство lineheight, и FontFamily в одной декларации
    fontFamily Устанавливает или возвращает семейство шрифтов для текста
    fontSize Устанавливает или возвращает размер шрифта текста
    fontStyle Задает или возвращает тип шрифта: обычный, курсивный или косой
    fontVariant Устанавливает или возвращает, должен ли шрифт отображаться заглавными буквами
    fontWeight Устанавливает или возвращает смелость шрифта
    fontSizeAdjust Сохраняет читаемость текста при резервном копировании шрифта
    fontStretch Выбирает обычную, сжатую или развернутую грань из семейства шрифтов
    hangingPunctuation Указывает, может ли знак препинания располагаться вне поля строки
    height Задает или возвращает высоту элемента
    hyphens Задает способ разделения слов для улучшения расположения абзацев
    icon Предоставляет автору возможность стилизовать элемент с помощью знакового эквивалента
    imageOrientation Указывает поворот вправо или по часовой стрелке, который агент пользователя применяет к изображению
    isolation Определяет, должен ли элемент создавать новое содержимое стека
    justifyContent Задает или возвращает выравнивание между элементами внутри гибкого контейнера, если не использовать все доступное пространство.
    left Устанавливает или возвращает левое положение позиционированного элемента
    letterSpacing Устанавливает или возвращает пробел между символами в тексте
    lineHeight Задает или возвращает расстояние между строками в тексте
    listStyle Задает или возвращает listStyleImage, listStylePosition, и listStyleType в одной декларации
    listStyleImage Устанавливает или возвращает изображение в качестве маркера элемента списка
    listStylePosition Устанавливает или возвращает положение маркера элемента списка
    listStyleType Задает или возвращает Тип маркера элемента списка
    margin Задает или возвращает поля элемента (может иметь до четырех значений)
    marginBottom Устанавливает или возвращает нижнее поле элемента
    marginLeft Устанавливает или возвращает левое поле элемента
    marginRight Устанавливает или возвращает правое поле элемента
    marginTop Устанавливает или возвращает верхнее поле элемента
    maxHeight Устанавливает или возвращает максимальную высоту элемента
    maxWidth Задает или возвращает максимальную ширину элемента
    minHeight Устанавливает или возвращает минимальную высоту элемента
    minWidth Устанавливает или возвращает минимальную ширину элемента
    navDown Задает или возвращает, где перемещаться с помощью клавиши навигации со стрелкой вниз
    navIndex Устанавливает или возвращает порядок табуляции для элемента
    navLeft Задает или возвращает, где перемещаться с помощью клавиши навигации со стрелкой влево
    navRight Задает или возвращает, где перемещаться с помощью клавиши навигации со стрелкой вправо
    navUp Задает или возвращает, где перемещаться с помощью клавиши навигации со стрелкой вверх
    objectFit Указывает, как содержимое замененного элемента должно быть установлено в поле, заданном его используемыми высотой и шириной
    objectPosition Указывает выравнивание замененного элемента внутри его коробки
    opacity Устанавливает или возвращает уровень непрозрачности для элемента
    order Устанавливает или возвращает порядок гибкого элемента относительно остальных
    orphans Задает или возвращает минимальное количество строк для элемента, которое должно оставаться внизу страницы при разрыве страницы внутри элемента
    outline Устанавливает или возвращает все свойства структуры в одном объявлении
    outlineColor Задает или возвращает цвет контура вокруг элемента
    outlineOffset Смещает контур и выводит его за границу
    outlineStyle Задает или возвращает стиль контура вокруг элемента
    outlineWidth Задает или возвращает ширину контура вокруг элемента
    overflow Устанавливает или возвращает, Что делать с содержимым, отображаемым вне поля элемента
    overflowX Указывает, что делать с левыми/правыми краями содержимого, если оно переполняет область содержимого элемента
    overflowY Указывает, что делать с верхними/нижними краями содержимого, если оно переполняет область содержимого элемента
    padding Устанавливает или возвращает заполнение элемента (может иметь до четырех значений)
    paddingBottom Устанавливает или возвращает нижнее заполнение элемента
    paddingLeft Устанавливает или возвращает левое заполнение элемента
    paddingRight Устанавливает или возвращает правое заполнение элемента
    paddingTop Устанавливает или возвращает верхнюю прокладку элемента
    pageBreakAfter Устанавливает или возвращает поведение разрыва страницы после элемента
    pageBreakBefore Устанавливает или возвращает поведение разрыва страницы перед элементом
    pageBreakInside Устанавливает или возвращает поведение разрыва страницы внутри элемента
    perspective Устанавливает или возвращает перспективу просмотра 3D-элементов
    perspectiveOrigin Устанавливает или возвращает нижнее положение 3D элементов
    position Устанавливает или возвращает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)
    quotes Задает или возвращает тип кавычек для внедренных предложений
    resize Задает или возвращает признак изменения размера элемента пользователем
    right Устанавливает или возвращает правильное положение позиционированного элемента
    tableLayout Задает или возвращает способ компоновки ячеек, строк и столбцов таблицы
    tabSize Устанавливает или возвращает длину символа табуляции
    textAlign Устанавливает или возвращает горизонтальное выравнивание текста
    textAlignLast Задает или возвращает способ выравнивания последней строки блока или строки непосредственно перед принудительным разрывом строки при выравнивании текста по ширине»
    textDecoration Устанавливает или возвращает оформление текста
    textDecorationColor Устанавливает или возвращает цвет оформления текста
    textDecorationLine Задает или возвращает тип строки в текстовом оформлении
    textDecorationStyle Задает или возвращает стиль строки в текстовом оформлении
    textIndent Задает или возвращает отступ первой строки текста
    textJustify Устанавливает или возвращает метод выравнивания, используемый при выравнивании текста по ширине»
    textOverflow Задает или возвращает то, что должно произойти, когда текст переполняет содержащий элемент
    textShadow Задает или возвращает эффект тени текста
    textTransform Устанавливает или возвращает заглавную букву текста
    top Устанавливает или возвращает верхнюю позицию позиционированного элемента
    transform Применяется 2D-или 3D-преобразования к элементу
    transformOrigin Устанавливает или возвращает положение преобразованных элементов
    transformStyle Задает или возвращает способ отображения вложенных элементов в 3D-пространстве
    transition Сокращенное свойство для установки или возврата четырех свойств перехода
    transitionProperty Задает или возвращает свойства CSS, что эффект перехода для
    transitionDuration Задает или возвращает количество секунд или миллисекунд, необходимых для завершения эффекта перехода
    transitionTimingFunction Устанавливает или возвращает кривую скорости эффекта перехода
    transitionDelay Устанавливает или возвращает время начала эффекта перехода
    unicodeBidi Задает или возвращает, должен ли текст быть переопределен для поддержки нескольких языков в одном документе
    userSelect Устанавливает или возвращает, можно ли выбрать текст элемента или нет
    verticalAlign Задает или возвращает вертикальное выравнивание содержимого элемента
    visibility Устанавливает или возвращает, должен ли элемент быть видимым
    whiteSpace Задает или возвращает способ обработки вкладок, разрывов строк и пробелов в тексте
    width Задает или возвращает ширину элемента
    wordBreak Устанавливает или возвращает правила разрыва строк для сценариев, отличных от CJK
    wordSpacing Задает или возвращает интервал между словами в тексте
    wordWrap Позволяет длинные, нерушимые слова, которые будут разбиты и переносить на следующую строку
    widows Задает или возвращает минимальное количество линий для элемента, который должен быть виден в верхней части страницы
    zIndex Задает или возвращает порядок стека позиционированного элемента

Для ответа в этой теме необходимо авторизоваться.

Перейти к верхней панели