JavaScriptのborderRightStyleプロパティで右ボーダーのスタイルを設定する方法
JavaScriptで要素の右ボーダー（右枠線）のスタイルを変更したい場合は、borderRightStyle プロパティを使用します。このプロパティは、CSSの border-right-style に相当し、JavaScriptから動的に右ボーダーの見た目を制御できます。
使用できる主な値
borderRightStyle プロパティには、以下のような値を設定できます。
none… ボーダーを表示しない（初期値）solid… 一本の実線dashed… 破線dotted… 点線double… 二重線groove / ridge / inset / outset… 立体的な装飾線
サンプルコード
以下のコードでは、グレーの実線ボーダーを持つボックスを用意し、ボタンをクリックすると右ボーダーのスタイルが「破線（dashed）」に変化します。実際にブラウザで実行して動作を確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="box">デモテキスト</div>
<br><br>
<button type="button" onclick="display()">右ボーダーのスタイルを変更</button>
<script>
function display() {
document.getElementById("box").style.borderRightStyle = "dashed";
}
</script>
</body>
</html>コードの解説
処理のポイントは次の通りです。
#boxセレクターで、太さ・スタイル・色を指定したボーダーを持つ300px四方のボックスを作成します。- ボタンがクリックされると
display()関数が呼び出されます。 document.getElementById("box")で対象の要素を取得し、style.borderRightStyle = "dashed"によって右ボーダーのみを実線から破線へ変更します。
このように、element.style.borderRightStyle の形式で記述するだけで、他のボーダー（上・下・左）に影響を与えることなく、右側のスタイルだけをピンポイントで操作できます。同様に、borderRightWidth（太さ）や borderRightColor（色）プロパティと組み合わせれば、右ボーダーをより柔軟にカスタマイズすることも可能です。
-
JavaScriptで要素の右マージンを設定する方法【marginRightプロパティの使い方】
JavaScriptで要素の右マージンを設定するには、style.marginRightプロパティを使用します。このプロパティに対して「150px」や「2em」などの値を代入することで、指定した要素の右側に余白を動的に追加できます。 以下のサンプルコードでは、ボタンをクリックすると要素の右マージンが設定されます。実際にコードを実行して、動作を確認してみてください。 サンプルコード <!DOCTYPE html> <html> <head> <style>
-
CSSで境界線（ボーダー）のスタイルを設定する方法
CSSで要素の境界線（ボーダー）のスタイルを設定するには、border-style プロパティを使用します。このプロパティにより、以下のようなさまざまなスタイルから好みのボーダーを選択できます。 border-styleで指定できる主な値 none： 境界線を表示しません。 solid： 1本の実線で表示されます。 dotted： 点線（ドットの連続）で表示されます。 dashed： 破線（短い線分の連続）で表示されます。 double： 2本の実線で表示されます。 groove： ページに刻み込まれたような凹凸のある立体的な線で表示されます。 ridge： grooveの逆で、盛り上がって