linkObject.mediaは、link要素（リンク要素）のmedia属性の値を取得、もしくは、設定するプロパティ。
media属性には、メディアタイプを指定することができる。
media属性は、メディアタイプ（ディバイス）ごとに、スタイルシートを振り分けたい場合に便利だ。例えば、印刷時には印刷用スタイルシートを適用させたり、携帯には携帯用スタイルシートを適用させたりできる
構文
取得
var $media = $linkElementReference.media;
戻り値
link要素（リンク要素）のmedia属性の値。
設定
$linkElementReference.media = mediaType;
- mediaType
- メディアタイプを指定。
- 主なメディアタイプ：
all：全てのメディアタイプ。screen：コンピューター画面。print：印刷。
サンプル
赤系CSS：
緑系CSS：
赤系CSSのlink要素のmedia属性の値：
緑系CSSのlink要素のmedia属性の値：
サンプルの動作について
- 「赤系CSS：」の「screen」ボタンをクリックし、「赤系CSSのlink要素のmedia属性の値」のmedia属性値を「screen」に設定すると、サンプル全体の背景色を薄い赤色にする。
- 「緑系CSS：」の「screen」ボタンをクリックし、「緑系CSSのlink要素のmedia属性の値」のmedia属性値を「screen」に設定すると、サンプル全体の背景色を薄い緑系にする。
- 「赤系CSS：」の「print」ボタンをクリックし、「赤系CSSのlink要素のmedia属性の値」のmedia属性値を「print」に設定すると、印刷時のサンプル全体の背景色を薄い赤色にする。印刷プレビューで確認してみて。
- 「緑系CSS：」の「print」ボタンをクリックし、「緑系CSSのlink要素のmedia属性の値」のmedia属性値を「print」に設定すると、印刷時のサンプル全体の背景色を薄い緑系にする。印刷プレビューで確認してみて。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setHref( $AorB, $media ) {
var $elementReference = document.getElementById( "sampleLink" + $AorB );
$elementReference.media = $media;
var $media = $elementReference.media;
document.getElementById( "sampleOutput" + $AorB ).innerHTML = $media;
}
</script>
function setHref( $AorB, $media ) {
var $elementReference = document.getElementById( "sampleLink" + $AorB );
$elementReference.media = $media;
var $media = $elementReference.media;
document.getElementById( "sampleOutput" + $AorB ).innerHTML = $media;
}
</script>
HTML
<div id="sampleWrap">
<p>
赤系CSS：
<button onclick="setHref('A','screen');">screen</button>
<button onclick="setHref('A','print');">print</button>
</p>
<p>
緑系CSS：
<button onclick="setHref('B','screen');">screen</button>
<button onclick="setHref('B','print');">print</button>
</p>
<p>赤系CSSのlink要素のmedia属性の値：<span id="sampleOutputA"></span></p>
<p>緑系CSSのlink要素のmedia属性の値：<span id="sampleOutputB"></span></p>
<link id="sampleLinkA" type="text/css" rel="stylesheet" media="screen" href="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleA.css" />
<link id="sampleLinkB" type="text/css" rel="stylesheet" media="test" href="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleB.css" />
</div>
<p>
赤系CSS：
<button onclick="setHref('A','screen');">screen</button>
<button onclick="setHref('A','print');">print</button>
</p>
<p>
緑系CSS：
<button onclick="setHref('B','screen');">screen</button>
<button onclick="setHref('B','print');">print</button>
</p>
<p>赤系CSSのlink要素のmedia属性の値：<span id="sampleOutputA"></span></p>
<p>緑系CSSのlink要素のmedia属性の値：<span id="sampleOutputB"></span></p>
<link id="sampleLinkA" type="text/css" rel="stylesheet" media="screen" href="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleA.css" />
<link id="sampleLinkB" type="text/css" rel="stylesheet" media="test" href="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleB.css" />
</div>
このサンプルでは、body要素内にlink要素を書いてしまってるが、本来は、head要素内に書く。