資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 設定左上角邊框的形狀？
在本教程中，我們將學習如何使用 JavaScript DOM 設定邊框左上角的圓角半徑。要使用 JavaScript 設定左上角邊框的形狀，請使用 borderTopLeftRadius 屬性。使用此屬性設定邊框半徑。
我們在網頁上多次應用邊框。通常，它用於顯示元素的重要性或部分之間的區別。我們可以使用 HTML 在網頁中建立表格。這是一個簡單的表格，不會吸引使用者。因此，我們使用 CSS 來設計表格或整個網頁。JavaScript DOM 還使我們能夠在執行時應用設計。
使用 JavaScript DOM 使我們的表格更具吸引力，有很多選項可用。建立圓角邊框是我們可用的選項之一。有不同的屬性可以使邊框的不同角變圓。我們必須設定半徑的長度才能使其變圓。
讓我們看看如何設定邊框左上角的圓角半徑。以下是我們可以使用 JavaScript DOM 設定邊框左上角圓角半徑的屬性：
borderTopLeftRadius 屬性
使用 borderTopLeftRadius 屬性
透過使用 JavaScript DOM，我們可以使邊框變圓。我們甚至可以為每個角新增不同的屬性和不同的半徑。borderTopLeftRadius 是我們可以用來設定邊框左上角圓角半徑的屬性。
我們可以為 borderTopLeftRadius 屬性指定兩個值。
如果我們設定 borderTopLeftRadius="10px"，則水平半徑將設定為 10px。
如果我們設定 borderTopLeftRadius="10px 20px"，則水平半徑將設定為 10px，垂直半徑將設定為 20px。
語法
以下是使用 JavaScript 中的 borderTopLeftRadius 屬性設定左上角邊框形狀的語法：
var div=document.getElementById(" <your ID here> ");
div.style.border=" < width || type || color >";
div.style.borderTopLeftRadius=" < length || % || Initial || Inherit > ";
您可以按照上述語法使用 borderTopLeftRadius 屬性。
引數
% - 以百分比設定左上角邊框的圓形邊框
length - 使用 px 或 cm 設定左上角邊框的圓形邊框。
Initial - 預設值。
Inherit - 使用父元素設定左上角邊框的圓形邊框。
示例 1
在下面給出的示例中，我們添加了一個按鈕併為其應用了一個 onclick 事件。單擊按鈕後，它將執行一個函式。該函式包含一個 borderTopLeftRadius 屬性，該屬性將把邊框左上角的形狀更改為圓形。雙擊按鈕後，按鈕將恢復其原始形狀。
<html> <body> <h2> Use <i> borderTopLeftRadius </i> to set the radius of the top-left corner </h2> <button id = "btn"> change border shape </button> <script> var element = document.getElementById("btn"); element.style.padding = "20px"; element.style.border = "4px solid blue"; element.addEventListener("click", changeShape); function changeShape(){ if(element.style.borderTopLeftRadius <= "0px"){ element.style.borderTopLeftRadius = "50px"; } else{ element.style.borderTopLeftRadius = "0px"; } } </script> </body> </html>
在上面的示例中，使用者可以看到我們使用了 borderTopLeftRadius 屬性來使用 JavaScript DOM 設定邊框左上角的半徑。
示例 2
在本例中，我們獲取半徑的值以將其用於 borderTopLeftRadius 屬性。每個長度都有其單位，就像我們在上面的示例中使用 px 一樣。還有其他單位，如 %、em、cm 等。我們也可以將它們用作我們的長度。使用單選按鈕，我們從使用者那裡獲取單位的輸入。單擊按鈕後，borderTopLeftRadius 屬性將把邊框左上角的形狀更改為圓形。
<html> <body> <h2> Use <i> borderTopLeftRadius </i> to set the radius of the top-left corner </h2> <div id = "container"> Will be surrounded by border on button click </div> <label for="input"> Radius(only integer) : </label> <input type="text" name="value" id="input"/><br> <input type="radio" name="radio_btn" id="pixel" value="px"/> <label for="pixel"> px </label><br> <input type="radio" name="radio_btn" id="emph" value="em"/> <label for="emph"> em </label><br> <input type="radio" name="radio_btn" id="centime" value="cm"/> <label for="centime"> cm </label><br> <input type="radio" name="radio_btn" id="percent" value="%"/> <label for="percent"> % </label><br> <button id = "btn"> Create rounded Border </button> <script> var element = document.getElementById("container"); var button = document.getElementById("btn"); element.style.width = "40%"; element.style.padding = "20px"; element.style.margin = "20px"; button.addEventListener("click", border); function border(){ var border = document.getElementById("input").value; element.style.border = "5px solid blue"; var radio_selected = document.querySelector( 'input[name="radio_btn"]:checked'); var radius = border+radio_selected.value; element.style.borderTopLeftRadius = radius; } </script> </body> </html>
在上面的示例中，使用者可以看到我們設定了邊框左上角的圓角半徑，並透過獲取使用者的值使其變圓。
在本教程中，我們學習瞭如何使用 JavaScript DOM 設定邊框左上角的圓角半徑。
274 次瀏覽
