style.display помогите с функцией — Javascript-форум

.

Вставить/изменить ссылку

Javascript Reference — HTML DOM Style display Property

The property sets or gets the element’s display type.

Browser Support

Syntax

Return the display property:

var v = object.style.display

Set the display property:

object.style.display=value

Property Values

Value Description
none Not showing the element
box displayed as a block-level flex container box
flex-box displayed as a block-level flex container box
block displayed as a block-level element like paragraphs
flex displayed as a block-level flex container box
inline Default value. displayed as an inline-level element like span
inline-block placed as an inline element on the same line as adjacent content, but it behaves as a block element
inline-flex displayed as an inline-level flex container box
inline-table displayed as an inline-level table
list-item displayed as a list-item
table displayed as a table
table-caption displayed as a table caption
table-cell displayed as a table cell
table-column displayed as a table column
table-column-group displayed as a table column group like
table-footer-group displayed as a table footer row group
table-header-group displayed as a table header row group
table-row displayed as a table row
table-row-group displayed as a table row group
inherit Inherit the display property from the parent element

Technical Details

Default Value: inline
Return Value: A string representing the display type
CSS Version CSS1

Example

The following code shows how to hide a <div> element.

The code above is rendered as follows:

Example 2

The following code shows how to set the display property and the visibility property.

The code above is rendered as follows:

Example 3

The following code shows difference between «inline», «block» and «none»:

The code above is rendered as follows:

Example 4

The following code shows how to get the display type of a <p> element.

The code above is rendered as follows:

Изменение стиля элементов

Последнее обновление: 1.11.2015

Для работы со стилевыми свойствами элементов в JavaScript применяются, главным образом, два подхода:

  • Изменение свойства style

  • Изменение значения атрибута class

Свойство style

Свойство style представляет сложный объект для управления стилем и напрямую сопоставляется с атрибутом style html-элемента. Этот объект содержит набор свойств CSS: .

Изменяем CSS переменные через JS

Например, установим цвет шрифта:

var root = document.documentElement; // устанавливаем стиль root.style.color = «blue»; // получаем значение стиля document.write(root.style.color); // blue

В данном случае название свойства color совпадает со свойством css. Аналогично мы могли бы установить цвет с помощью css:

html{ color:blue; }

Однако ряд свойств css в названиях имеют дефис, например, . В JavaScript для этих свойств дефис не употребляется. Только первая буква, которая идет после дефиса, переводится в верхний регистр:

var root = document.documentElement; root.style.fontFamily = «Verdana»;

Свойство className

С помощью свойства className можно установить атрибут элемента html. Например:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″ /> <style> .blueStyle{ color:blue; font-family:Verdana; } .article{ font-size:20px; } </style> </head> <body> <div class=»article»> <h3>Заголовок статьи</h3> <p>Первый абзац</p> <p>Второй абзац</p> </div> <script> var articleDiv = document.querySelector(«div.article»); // установка нового класса articleDiv.className = «blueStyle»; // получаем название класса document.write(articleDiv.className); </script> </body> </html>

Благодаря использованию классов не придется настраивать каждое отдельное свойство css с помощью свойства .

Но при этом надо учитывать, что прежнее значение атрибута удаляется. Поэтому, если нам надо добавить класс, надо объединить его название со старым классом:

articleDiv.className = articleDiv.className + » blueStyle»;

И если надо вовсе удалить все классы, то можно присвоить свойству пустую строку:

articleDiv.className = «»;

Свойство classList

Выше было рассмотрено, как добавлять классы к элементу, однако для управления множеством классов гораздо удобнее использовать свойство classList. Это свойство представляет объект, реализующий следующие методы:

  • add(className): добавляет класс className

  • remove(className): удаляет класс className

  • toggle(className): переключает у элемента класс на className. Если класса нет, то он добавляется, если есть, то удаляется

Например:

var articleDiv = document.querySelector(«div.article»); // удаляем класс articleDiv.classList.remove(«article»); // добавляем класс articleDiv.classList.add(«blueStyle»); // переключаем класс articleDiv.classList.toggle(«article»);

НазадСодержаниеВперед

Взаимодействие JavaScript и CSS

Изменение CSS свойства с помощью JavaScript

назад

Размещена 26 августа, 2008 года

Часто бывает необходимо изменить css свойсва элемента динамически, используя javascript. Можно менять свойство class, если у вас описан стиль в css и надо поменять сразу несколько свойств. Например так:

document.getElementById(div_id).className=’class1′; Но если вам нужно изменить одно или несколько свойств, оставив остальные неизменными, или если у вас не описан отдельный класс для этого, можно использовать следующую конструкцию: document.getElementById(div_id).style.JS_property_reference = «new_CSS_property_value»;

В таблице приведены CSS Property’s и соответствующие им JavaScript Reference’s.

CSS Property JavaScript Reference
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *