屬性

要選取 HTML 文件中沒有類別的元素，您可以使用以下方式： :not(.class) 例如： p:not(.description) { color: red; }

默認情況下，如果在元素上設置了寬度（或高度），這將應用於內容區域。 這不包括填充、邊框和外邊距，它們是添加在其上面的。 例如，我在一個p元素上設置了以下CSS： p { width: 100px; padding: 10px; border: 10px solid black; margin: 10px; } 下面是瀏覽器應用的效果： 您可以通過設置box-sizing屬性來更改這種行為。如果將其設置為border-box，則計算寬度和高度時將包括填充和邊框。 在前面的示例中，這是什麼意思： p { box-sizing: border-box; width: 100px; padding: 10px; border: 10px solid black; margin: 10px; } 看到了嗎？實際元素大小現在是60，因為它是100 - 10 * 2（填充）- 10 * 2（邊框）。 只有外邊距被忽略，這是合理的，因為在我們的思維中，我們通常將其視為一個獨立的事物：外邊距在元素的框外。 這個屬性是一個小改變，但在計算元素尺寸時有很大的影響。 在Codepen上的演示 如果您喜歡使用它，您可以通過以下CSS規則將它應用於頁面上的每個元素： *, *:before, *:after { box-sizing: border-box; }

了解 JavaScript Object 物件的 defineProperty() 方法的所有相關資訊 創建或配置物件屬性。 返回該物件。 接受 3 個參數。第一個是我們將要在其上創建或配置屬性的物件。第二個是以字串形式定義的屬性名稱。第三個是具有屬性定義的物件。 範例： const dog = {} Object.defineProperty(dog, 'breed', { value: 'Siberian Husky' }) console.log(dog.breed) //'Siberian Husky' 我不只是寫了 breed: 'Siberian Husky'，而是需要傳遞一個屬性描述符物件，該物件在本頁的開頭被定義。

本教程屬於 Swift 系列。 結構體是 Swift 中一個重要的概念。 Swift 到處都有結構體，甚至內建的類型也是結構體。 我們可以創建結構體的實例，我們稱之為 對象（objects）。 在大多數語言中，對象只能由類創建。Swift 也有類，但是你也可以從結構體中創建對象，官方文件還建議我們更傾向使用結構體，因為它們使用起來更加簡單。 它們是類的輕量版。 一個結構體可以有屬性。 一個結構體可以有方法（函數）。 一個結構體可以定義下標。 一個結構體可以定義初始化器。 一個結構體可以遵從協議。 一個結構體可以被擴展。 類允許的一個重要特性是繼承，所以如果你需要繼承，你需要使用類。 結構體的定義使用如下語法： struct Dog { } 結構體內部你可以定義存儲屬性： struct Dog { var age = 8 var name = "Roger" } 這個結構體定義定義了一個類型。要創建一個具有此類型的新實例，使用以下語法： let roger = Dog() 一旦你有了一個實例，你可以使用點語法來訪問其屬性： let roger = Dog() roger.age roger.name 相同的點語法也用於更新屬性值： roger.age = 9 你也可以通過傳遞屬性的值創建結構體實例： let syd = Dog(age: 7, name: "Syd") syd.age syd.name 要這樣做，屬性必須被定義為變量，使用 var，而不是常量（使用 let）。同時，重要的是要尊重那些屬性定義的順序。 結構體可以有實例方法：屬於結構體實例的函數。 struct Dog { var age = 8 var name = "Roger" func bark() { print("\(name): wof!...

您可以將任何屬性添加到任何 SwiftUI 視圖中，就像這樣： import SwiftUI struct ContentView: View { let name = "Flavio" var body: some View { Text("Hello, \(name)!") .font(.largeTitle) } } 您可以看到我使用了 let，因為該屬性是一個常量。 請注意，稍後我們將看到如何通過點擊按鈕來更新屬性值。 以下是另一個帶有整數變量的示例： import SwiftUI struct ContentView: View { let name = "Flavio" let age = 38 var body: some View { VStack { Text("Hello, \(name)!") .font(.largeTitle) Text("You are \(age) years old") } } }

了解JavaScript Object物件的preventExtensions()方法 JavaScript的preventExtensions()方法是Object物件中的一種方法，它接受一個物件作為參數，並返回相同的物件。傳遞的物件會被改變，成為一個不接受新屬性的物件。無法添加新的屬性，但可以刪除現有的屬性，並且可以更改現有的屬性。 範例： const dog = {} dog.breed = 'Siberian Husky' Object.preventExtensions(dog) dog.name = 'Roger' //TypeError: Cannot add property name, object is not extensible 傳遞的參數也會作為參數返回，因此dog === myDog（它們是同一個物件）。 我們無法添加新的屬性，但可以刪除現有的屬性： const dog = {} dog.breed = 'Siberian Husky' dog.name = 'Roger' Object.preventExtensions(dog) delete dog.name dog //{ breed: 'Siberian Husky' }

如果你需要在 DOM 中使用原生 JavaScript 為 HTML 元素添加屬性，該怎麼辦呢？ 假設你已經使用 querySelector() 選中了一個元素： const button = document.querySelector('#mybutton') 你可以按照以下步驟為它附加屬性： 創建屬性 設置屬性的值 將屬性附加到元素上 例如： const attribute = document.createAttribute('id') attribute.value = `remove-${item.name}` button.setAttributeNode(attribute) 如果該元素尚不存在，則你需要先創建元素，然後創建屬性，再將屬性添加到元素上，最後再將元素添加到 DOM 中： const button = document.createElement('button') const attribute = document.createAttribute('id') attribute.value = `some-value` button.setAttributeNode(attribute) button.textContent = 'Click me' document.querySelector('.container').appendChild(button)

使用 JavaScript 物件時，你可以使用 in 運算子來檢查是否存在特定的鍵。 假設有一個 car 物件： const car = { color: 'blue' } 我們可以使用下面的語句來檢查 color 屬性是否存在，並且會返回 true： 'color' in car 我們可以將其用於條件判斷式中： if ('color' in car) { } 另一種方法是使用物件的 hasOwnProperty() 方法： car.hasOwnProperty('color') 當繼承在應用程式結構中扮演重要角色時，不同之處在於 in 運算子即使對於從父物件繼承的屬性也會返回 true，而 hasOwnProperty() 則不會。只有在物件直接擁有該屬性時，它才會返回 true，而不是其祖先物件之一。 如果你想要取得一個屬性，並且如果該屬性不存在則返回預設值，可以使用後備機制： car.brand || 'Ford' 如果物件上不存在 brand 屬性鍵，則該語句會返回字串 Ford。

了解如何計算 JavaScript 物件擁有多少屬性 使用 Object.keys() 方法，將要檢查的物件傳入，獲取物件的所有 (自身) 可枚舉屬性的陣列。 然後通過檢查 length 屬性來計算該陣列的長度： const car = { color: '藍色', brand: 'Ford', model: 'Fiesta' } Object.keys(car).length 我提到了可枚舉屬性。這表示它們的內部可枚舉標誌設置為 true，這是默認值。請參考 MDN 了解更多關於這個主題的信息。