javascript - Javascriptを使用した境界半径

Question

CSSを使用して、個別の境界半径を次のように設定します。

border-top-left-radius: 10px;   
border-top-right-radius: 10px;   
border-bottom-left-radius: 10px;   
border-bottom-right-radius: 10px;

しかし、Javascriptを使用してこれらの個別の境界線半径を設定するにはどうすればよいですか？

Answer 1

<div id="target">Lorem Ipsum</div>

<script type="text/javascript">
    var target = document.getElementById("target");
    target.style.borderTopLeftRadius = "20px";
</script>

実例

Answer 2

element.style['border-top-left-radius'] = '4px';
element.style['border-top-right-radius'] = '4px';
element.style['border-bottom-left-radius'] = '4px';
element.style['border-bottom-right-radius'] = '4px';

またはさらに小さい：

element.style['border-radius'] = '4px';

次のものも使用できます。

element.style.borderTopLeftRadius = '4px';
element.style.borderTopRightRadius = '4px';
element.style.borderBottomLeftRadius = '4px';
element.style.borderBottomRightRadius = '4px';

ただし、これは（まだ）Web標準ではないため、各ブラウザーには独自の宣言があることに注意してください。

element.style['border-radius']//Future standard
element.style['-webkit-border-radius']//Webkit(Safari and Chrome)
element.style['-moz-border-radius']//Mozilla Firefox
element.style['-o-border-radius']//Opera

Answer 3

可能であれば、各コーナーの丸めを指定してCSSクラスを作成してから、単純なJSを使用してクラスを交換するのが最善の方法です。そうすれば、たとえばブラウザがIEを必要とする場合、またはIEで-webkit-border-radiusある場合に、フォールバックを少し簡単に指定できます。border-radius