Свойство borderStyle
Пример style.borderStyle
Добавьте "сплошную" границу к элементу <div>:
document.getElementById("myDiv").style.borderStyle = "solid";
Попробуйте сами »
Описание borderStyle
Свойство borderStyle задает или возвращает стиль границы элемента.
Это свойство может принимать от одного до четырех значений:
- Одно значение, например: p {border-style: solid} - все четыре границы будут сплошными
- Два значения, например: p {border-style: solid dotted} - верхняя и нижняя границы будут сплошными, левая и правая границы будут пунктирными
- Три значение, например: p {border-style: solid dotted double} - верхняя граница будет сплошной, левая и правая границы будут пунктирными, нижняя граница будет двойной.
- Четвёртое значение, например: p {border-style: solid dotted double dashed} - верхняя граница будет сплошной, правая граница будет пунктирной, нижняя граница будет двойной, левая граница будет пунктирной
Поддержка borderStyle
| Свойство | |||||
|---|---|---|---|---|---|
| borderStyle | Да | Да | Да | Да | Да |
Синтаксис borderStyle
Вернуть свойство borderStyle:
object.style.borderStyle
Установите свойство borderStyle:
object.style.borderStyle = value
Значение свойства borderStyle
| Значение | Описание |
|---|---|
| none | Не определяет границу. Это значение по умолчанию |
| hidden | То же, что и "none", за исключением разрешения конфликта границ для элементов таблицы. |
| dotted | Определяет пунктирную границу |
| dashed | Определяет пунктирную границу |
| solid | Определяет сплошную границу |
| double | Определяет две границы. Ширина обеих границ совпадает со значением border-width |
| groove | Определяет 3D рифленую границу. Эффект зависит от значения border-color |
| ridge | Определяет 3D ребристую границу. Эффект зависит от значения border-color |
| inset | Определяет 3D врезку границы. Эффект зависит от значения border-color |
| outset | Определяет 3D границу начала. Эффект зависит от значения border-color |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали borderStyle
| Значение по умолчанию: | none |
|---|---|
| Возвращаемое значение: | Строка, представляющая стиль границы элемента. |
| CSS Версия | CSS1 |
Ещё примеры borderStyle
Измените стиль четырех границ элемента <div>:
document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
Попробуйте сами »
Вернуть свойство стиля границы элемента <div>:
alert(document.getElementById("myDiv").style.borderStyle);
Попробуйте сами »
Демонстрация всех различных значений:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
Попробуйте сами »
Связанные страницы borderStyle
CSS Учебник: CSS Границы
CSS Справочник: Свойство border-style
HTML DOM Справочник: Свойство border