Name: Javascript教程--探索CSS中的自定義屬性 (Javascript Tutorial - Explore custom properties in CSS)
Uploaded: 2022-11-16T18:20:31.000Z
Duration: 4 min 21 s

- [Instructor] Custom properties introduce

a new level of configuration and customization to CSS

對CSS的配置和定製達到一個新的水準

and manipulate these custom properties using JavaScript,

並使用JavaScript操作這些自定義屬性。

opens up a whole new dimension of possibilities.

開闢了一個全新的可能性層面。

In this example, I've used custom properties

在這個例子中，我使用了自定義屬性

You'll notice here, I'm setting up the color

你會注意到在這裡，我正在設置顏色

and then there's a fallback value, black,

There's a variable or a custom property called BG color

有一個變量或自定義屬性叫做BG顏色

I'm using these fallbacks because in the main style sheet,

我使用這些回退是因為在主樣式表中。

the color and background color are never defined.

的顏色和背景顏色從未被定義。

If we go look, we have max width and white space,

如果我們去看，我們有最大的寬度和白色空間。

但沒有顏色，也沒有BG的顏色。

This is one example of how we can use custom properties

這就是我們如何使用自定義屬性的一個例子

to do really advanced styling for individual items

為個別項目做真正的高級造型設計

because although color and BG color are not defined

因為儘管顏色和BG顏色沒有被定義

they are defined in line on one of the elements.

它們被定義在其中一個元素上的行。

We have the element, then a style attribute,

我們有一個元素，然後是一個樣式屬性。

and then we have color and BG color defined

然後，我們有顏色和BG顏色的定義

these custom properties kick in for this one element here.

這些自定義屬性在這裡為這一個元素啟動。

how the styling is going to happen in our style sheet

在我們的樣式表中如何進行樣式設計

and then use custom properties only where necessary

然後只在必要時使用自定義屬性

and we can see how this could easily be extended

我們可以看到，這可以很容易地被擴展

using JavaScript by injecting custom property values

通過注入自定義屬性值，使用JavaScript

是以，這引出了一個明顯的問題。

how do we access custom properties using JavaScript?

我們如何使用JavaScript訪問自定義屬性？

The answer is the same way we've been doing it so far.

答案是與我們迄今為止的做法相同。

是以，這裡有一個如何訪問的例子

the in line custom properties for that element.

and then we say console.log(listItem), so the element,

然後我們說 console.log(listItem)，所以這個元素。

Run this in the browser and you see in the console,

在瀏覽器中運行這個，你在控制檯中看到。

And this is the value of the custom property

You'll also notice I'm using get property value here

你還會注意到我在這裡使用了獲取屬性值的方法

because the custom property name starts with two dashes

因為自定義屬性名稱以兩個破折號開頭

而且正如我們現在所瞭解的那樣。

two dashes as a JavaScript property name does not work.

用兩個破折號作為JavaScript屬性名是行不通的。

如果我們試圖說listItemstyle.--color.Collaboration.Collaboration.Collaboration.Collaboration.Chile

so here we have to use get property value.

所以在這裡我們必須使用獲取屬性值。

It also means we can't do some of this traversing

這也意味著我們不能做一些穿越的工作

because the custom properties are just different.

So that's in line styles and it makes sense.

是以，這是符合風格的，是有意義的。

I've defined some custom properties here at the very top.

我在最上面定義了一些自定義屬性。

That means if I go and say document.styleSheets[0],

這意味著如果我去說document.styleSheets[0]。

所以我會說 console.log(styleSheet)。

And then I want to know about the custom properties.

然後我想知道自定義屬性的情況。

So here I have max width and white space.

是以，在這裡我有最大的寬度和白色空間。

So let's say style.getPropertyValue and --max=width.

所以我們說style.getPropertyValue和--max=width。

保存，回到瀏覽器中，70輛大眾汽車。

Custom properties behave exactly the same way

自定義屬性的行為方式完全相同

The only thing you need to keep in mind is that

there are no JavaScript defined property names for these.

沒有JavaScript定義的這些屬性名稱。

是以，這些駱駝字母大小寫的屬性名稱。

because the custom properties always start with dash dash.

因為自定義屬性總是以破折號開始。

所以這裡你必須使用getPropertyValue

字幕列表影片播放

Javascript教程--探索CSS中的自定義屬性 (Javascript Tutorial - Explore custom properties in CSS)

individual

obvious

access

grab