スタイルborderWidthプロパティ
例
<div>要素の4つの境界線の幅を変更します。
document.getElementById("myDiv").style.borderWidth = "thick";
定義と使用法
borderWidthプロパティは、要素の境界線の幅を設定または返します。
このプロパティは、1〜4つの値を取ることができます。
- 次のような1つの値:p {border-width:thick} -4つの境界線すべてが太くなります
- 次のような2つの値:p {border-width:thick thin}-上下の境界線は太くなり、左右の境界線は薄くなります
- 次のような3つの値:p {border-width:thick thin Medium}-上の境界線は太くなり、左右の境界線は薄くなり、下の境界線は中程度になります
- 次のような4つの値:p {border-width:thick thin Medium 10px}-上の境界線は太くなり、右の境界線は薄くなり、下の境界線は中程度になり、左の境界線は10pxになります。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
borderWidth | Yes | Yes | Yes | Yes | Yes |
構文
borderWidthプロパティを返します。
object.style.borderWidth
borderWidthプロパティを設定します。
object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
プロパティ値
Value | Description |
---|---|
thin | Defines a thin border |
medium | Defines a medium border. This is default |
thick | Defines a thick border |
length | The width of the border in length units |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
技術的な詳細
デフォルト値: | 中くらい |
---|---|
戻り値: | 要素の境界線の幅を表す文字列 |
CSSバージョン | CSS1 |
その他の例
例
<div>要素の上下の境界線の幅を太く、左右の境界線の幅を細く変更します。
document.getElementById("myDiv").style.borderWidth = "thick thin";
例
長さの 値を使用して、<div>要素の4つの境界線の幅を変更します。
document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px";
例
<div>要素の境界線の幅を返します。
alert(document.getElementById("myDiv").style.borderWidth);
関連ページ
CSSチュートリアル:CSS Border
CSSリファレンス:border-widthプロパティ
HTML DOMリファレンス:borderプロパティ
❮スタイルオブジェクト