最新のWeb開発のチュートリアル
 

Style borderStyle Property

<スタイルオブジェクト

追加"solid"に国境を<div>要素:

document.getElementById("myDiv").style.borderStyle = "solid";
»それを自分で試してみてください

定義と使用法

BorderStyleプロパティを設定したり、要素の境界線のスタイルを返します。

このプロパティは、1から4つの値をとることができます。

  • 一つの値、のような:P {ボーダースタイル:固体} - すべての4つの境界線が実線になります
  • P:のような2つの値{ボーダースタイル:固体点線} - 上部と下部境界は、固体左と右の境界であろうが点在します
  • P:のような3つの値{ボーダースタイル:固体点線の二重} - トップボーダーが左と右の境界が点在され、固体になり、下の境界は、二重になります
  • P:のような四つの値、{ボーダースタイル:固体点線の二重破線} - 上部境界は、固体となり、右ボーダーを点在され、下の境界は二重、左境界は、破線されるであろう

ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

BorderStyleプロパティは、すべての主要なブラウザでサポートされています。


構文

BorderStyleプロパティを返します:

object .style.borderStyle

BorderStyleプロパティを設定します。

object .style.borderStyle= プロパティ値
説明
none 何の境界線を定義します。 これがデフォルトです
hidden 同じ"none"のテーブル要素のための国境紛争解決を除いて、
dotted 点線の境界線を定義します
dashed 点線の境界線を定義します
solid 固体の境界線を定義します
double 2つの境界を定義します。 2つの境界の幅は、ボーダー幅の値と同じです
groove 3D溝付き境界線を定義します。 効果はボーダー色の値に依存します
ridge 3D隆起境界線を定義します。 効果はボーダー色の値に依存します
inset 3Dのインセットの境界線を定義します。 効果はボーダー色の値に依存します
outset 3D当初の境界線を定義します。 効果はボーダー色の値に依存します
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

デフォルト値: なし
戻り値: 要素の境界線のスタイルを表す文字列、
CSSのバージョン CSS1

その他の例

4つのボーダーのスタイル変更<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;
»それを自分で試してみてください

関連ページ

CSSチュートリアル: CSSボーダー

CSSリファレンス: border-style property

HTML DOMリファレンス: border property


<スタイルオブジェクト