diff --git a/files/zh-cn/web/api/htmllinkelement/as/index.md b/files/zh-cn/web/api/htmllinkelement/as/index.md new file mode 100644 index 00000000000000..94bdc7877029b3 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/as/index.md @@ -0,0 +1,26 @@ +--- +title: HTMLLinkElement:as 属性 +slug: Web/API/HTMLLinkElement/as +l10n: + sourceCommit: 782dea39dbc29c19c82fef8fd8a1222db3c248ab +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`as`** 属性返回一个字符串,该字符串表示将由链接元素预加载的内容类型。 + +当链接元素的 [`rel="preload"`](/zh-CN/docs/Web/HTML/Attributes/rel/preload) 时,`as` 属性必须有一个值,否则资源将不会被获取。它也可以应用于 [`rel="modulepreload"`](/zh-CN/docs/Web/HTML/Attributes/rel/modulepreload) 的链接元素,但如果省略,将默认为 `script`。对于其他类型的链接元素,如 `rel="prefetch"`,则不应设置此属性。 + +此属性反映 HTML [``](/zh-CN/docs/Web/HTML/Element/link) 元素的 [`as` 属性](/zh-CN/docs/Web/HTML/Element/link#as)的值。 + +## 值 + +一个字符串,允许以下值:`"audio"`、`"document"`、`"embed"`、`"fetch"`、`"font"`、`"image"`、`"object"`、`"script"`、`"style"`、`"track"`、`"video"`、`"worker"`。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/api/htmllinkelement/blocking/index.md b/files/zh-cn/web/api/htmllinkelement/blocking/index.md new file mode 100644 index 00000000000000..be4c6d28dbbe70 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/blocking/index.md @@ -0,0 +1,48 @@ +--- +title: HTMLLinkElement:blocking 属性 +slug: Web/API/HTMLLinkElement/blocking +l10n: + sourceCommit: 7cd4706990ab95794415aee05ba0a9662e742a17 +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`blocking`** 属性是一个字符串,表示在获取外部资源时应阻塞某些操作。 + +它反映 {{HTMLElement("link")}} 元素的 `blocking` 属性。 + +## 值 + +一个字符串,必须是以下列出的用空格分隔的阻塞标记列表,这些标记指示应被阻塞的操作: + +- `render` + - : 屏幕上的内容渲染被阻塞。 + +## 示例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.blocking); // 输出:“render” +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLScriptElement.blocking")}} +- {{domxref("HTMLStyleElement.blocking")}} diff --git a/files/zh-cn/web/api/htmllinkelement/crossorigin/index.md b/files/zh-cn/web/api/htmllinkelement/crossorigin/index.md new file mode 100644 index 00000000000000..5111c3548281e6 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/crossorigin/index.md @@ -0,0 +1,37 @@ +--- +title: HTMLLinkElement:crossOrigin 属性 +slug: Web/API/HTMLLinkElement/crossOrigin +l10n: + sourceCommit: 0a9c10fc67901972221dc7b3d006334fbfa73dce +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`crossOrigin`** 属性指定了在检索资源时要使用的{{Glossary("CORS", "跨源资源共享")}}设置。 + +## 值 + +一个指定在获取资源时要使用的 CORS 模式的关键词字符串。可能的值包括: + +- `anonymous` 或空字符串(`""`) + - : 由 {{domxref("HTMLLinkElement")}} 发送的请求将使用 `cors` {{domxref("Request.mode", "mode", "", "nocode")}} 模式和 `same-origin` {{domxref("Request.credentials", "credentials", "", "nocode")}} 模式。这意味着如果资源是从加载文档的相同源获取的,则将启用 CORS 并发送凭据。 +- `use-credentials` + - : 由 {{domxref("HTMLLinkElement")}} 发送的请求将使用 `cors` {{domxref("Request.mode", "mode", "", "nocode")}} 模式和 `include` {{domxref("Request.credentials", "credentials", "", "nocode")}} 模式。该元素请求的所有资源都将使用 CORS,无论获取来自哪个域。 + +如果为 `crossOrigin` 属性指定了任何其他值,则它与指定为 `anonymous` 的效果相同。 + +如果未指定 `crossOrigin` 属性,则资源将在没有 CORS 的情况下被获取(即使用 `no-cors` {{domxref("Request.mode", "mode", "", "nocode")}} 模式和 `same-origin` {{domxref("Request.credentials", "credentials", "", "nocode")}} 模式)。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLImageElement.crossOrigin")}} +- {{domxref("HTMLMediaElement.crossOrigin")}} +- {{domxref("HTMLScriptElement.crossOrigin")}} diff --git a/files/zh-cn/web/api/htmllinkelement/disabled/index.md b/files/zh-cn/web/api/htmllinkelement/disabled/index.md new file mode 100644 index 00000000000000..79f678ee311545 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/disabled/index.md @@ -0,0 +1,51 @@ +--- +title: HTMLLinkElement:disabled 属性 +slug: Web/API/HTMLLinkElement/disabled +l10n: + sourceCommit: 7c68e9bbf680784817e6415336c7dde5ae96360a +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`disabled`** 属性是一个布尔值,表示链接是否被禁用。该属性仅在样式表链接(`rel` 属性设置为 `stylesheet`)时有效。 + +如果在加载 HTML 时指定了 `disabled` 属性,则在页面加载期间不会加载该样式表。相反,只有当 `disabled` 属性被设置为 `false` 或被移除时,样式表才会被加载。使用 JavaScript 设置 `disabled` 属性会导致样式表从文档的 {{domxref("Document.styleSheets")}} 列表中移除。 + +它反映 {{HTMLElement("link")}} 元素的 `disabled` 属性。 + +## 值 + +一个布尔值。 + +## 示例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.disabled); // 输出:true + +// 设置 disabled 属性为 false 以启用样式表 +el.disabled = false; +console.log(el.disabled); // 输出:false +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLScriptElement.integrity")}} +- [子资源完整性](/zh-CN/docs/Web/Security/Subresource_Integrity) diff --git a/files/zh-cn/web/api/htmllinkelement/fetchpriority/index.md b/files/zh-cn/web/api/htmllinkelement/fetchpriority/index.md new file mode 100644 index 00000000000000..eca169bba3bcd6 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/fetchpriority/index.md @@ -0,0 +1,53 @@ +--- +title: HTMLLinkElement:fetchPriority 属性 +slug: Web/API/HTMLLinkElement/fetchPriority +l10n: + sourceCommit: 0598721ab3f672c66a8357d9e6b27ec8644a2b21 +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`fetchPriority`** 属性为浏览器提供了一个提示,指示它应如何相对于同类型的其他资源来优先获取特定资源。它反映了对应 {{htmlelement("link")}} 元素的 [`fetchpriority`](/zh-CN/docs/Web/HTML/Element/link#fetchpriority) 属性。 + +该属性允许开发人员向浏览器发出信号,表明在加载过程中早期获取特定资源对用户体验的影响,这种影响可能比浏览器在分配内部优先级时能够合理推断出的影响更大或更小,特别是在预加载资源时。这反过来又使浏览器能够提高或降低优先级,并可能使资源比原本更早或更晚地加载。应谨慎使用该属性,因为过度或错误的优先级设置可能会降低性能。 + +获取优先级可用于补充[预加载](/zh-CN/docs/Web/HTML/Attributes/rel/preload)功能,允许开发人员提高某些资源的优先级,使其优先于默认以较高优先级预加载但影响较小的资源。例如,如果某张特定图片对网站的 {{glossary("Largest Contentful Paint", "LCP(最大内容绘制)")}}有显著贡献,那么可以将其设置为预加载,并赋予高获取优先级。 + +请注意,任何获取操作的内部优先级以及 `fetchPriority` 对优先级的影响都完全取决于浏览器。 + +## 值 + +一个表示优先级提示的字符串。可能的值包括: + +- `high` + - : 相对于同类型资源和内部优先级划分,以高优先级获取该资源。 +- `low` + - : 相对于同类型资源和内部优先级划分,以低优先级获取该资源。 +- `auto` + - : 不为获取优先级设置偏好。这是默认值。如果未设置值或设置了无效值,则使用此选项。 + +## 示例 + +```js +const preloadLink = document.createElement("link"); +preloadLink.href = "my-image.jpg"; +preloadLink.rel = "preload"; +preloadLink.as = "image"; +preloadLink.fetchPriority = "high"; +document.head.appendChild(preloadLink); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLImageElement.fetchPriority")}} +- {{domxref("HTMLScriptElement.fetchPriority")}} +- HTTP {{httpheader("Link")}} 标头 +- [使用 Fetch Priority API 优化资源加载](https://web.dev/articles/fetch-priority?hl=en#browser_priority_and_fetchpriority)一文讲述了该 API 如何影响 Chrome 中的优先级。 diff --git a/files/zh-cn/web/api/htmllinkelement/href/index.md b/files/zh-cn/web/api/htmllinkelement/href/index.md new file mode 100644 index 00000000000000..bba51fa8587d00 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/href/index.md @@ -0,0 +1,43 @@ +--- +title: HTMLLinkElement:href 属性 +slug: Web/API/HTMLLinkElement/href +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`href`** 属性包含一个字符串,该字符串是与链接相关联的 URL。 + +它反映 {{HTMLElement("link")}} 元素的 `href` 属性。如果元素没有 `href` 属性,则此属性的值为空字符串(`""`)。 + +> [!NOTE] +> 每个 `` 元素都必须包含 `href` 属性或 [`imagesrcset`](/zh-CN/docs/Web/HTML/Element/link#imagesrcset) 属性中的一个或两个。这意味着,对于每个有效的 ``,此属性或 {{domxref("HTMLLinkElement.imageSrcset", "imageSrcset")}} 都不会为空。 + +## 值 + +包含 URL 的字符串,如果没有 `href` 元素,则为空字符串(`""`)。 + +## 示例 + +```html + +``` + +```js +const link = document.getElementsByTag("link")[0]; +console.log(link.href); // 'example.css' +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLLinkElement.imageSrcset")}} 属性 +- {{domxref("HTMLAnchorElement.href")}} 属性 diff --git a/files/zh-cn/web/api/htmllinkelement/hreflang/index.md b/files/zh-cn/web/api/htmllinkelement/hreflang/index.md new file mode 100644 index 00000000000000..0fd693847a3762 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/hreflang/index.md @@ -0,0 +1,58 @@ +--- +title: HTMLLinkElement:hreflang 属性 +slug: Web/API/HTMLLinkElement/hreflang +l10n: + sourceCommit: 1a790d83cbfcd76ac05a1b18697597f8d110d2cf +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`hreflang`** 属性用于指示页面的语言和地理定位。浏览器可以利用这一提示来选择更合适的页面或提高{{Glossary("SEO", "搜索引擎优化")}}。 + +它反映 {{HTMLElement("link")}} 元素的 `hreflang` 属性,如果没有 `hreflang` 属性,则该属性的值为空字符串(`""`)。 + +## 值 + +包含语言标签的字符串,如果没有 `hreflang` 属性,则为空字符串(`""`)。 + +## 示例 + +```html + +
+``` + +```css +.tag { + margin-left: 20px; + font: bold; + font-size: 24px; +} +``` + +```js +const myLink = document.querySelector("link"); +const pTag = document.querySelector(".tag"); +pTag.textContent = myLink.hreflang; +``` + +### 结果 + +{{EmbedLiveSample("示例",100,100)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLAnchorElement.hreflang")}} 属性 diff --git a/files/zh-cn/web/api/htmllinkelement/index.md b/files/zh-cn/web/api/htmllinkelement/index.md new file mode 100644 index 00000000000000..03843695288a82 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/index.md @@ -0,0 +1,77 @@ +--- +title: HTMLLinkElement +slug: Web/API/HTMLLinkElement +l10n: + sourceCommit: 7cd4706990ab95794415aee05ba0a9662e742a17 +--- + +{{ APIRef("HTML DOM") }} + +**`HTMLLinkElement`** 接口表示外部资源的来源地址以及这些资源与文档之间的关系(对应于 [``](/zh-CN/docs/Web/HTML/Element/link) 元素;不要与 [``](/zh-CN/docs/Web/HTML/Element/a) 混淆,后者由 [`HTMLAnchorElement`](/zh-CN/docs/Web/API/HTMLAnchorElement) 表示)。此对象继承 {{domxref("HTMLElement")}} 接口的所有属性和方法。 + +{{InheritanceDiagram}} + +## 实例属性 + +_从其父接口 {{domxref("HTMLElement")}} 继承属性。_ + +- {{domxref("HTMLLinkElement.as")}} + - : 一个字符串,表示当 [`rel="preload"`](/zh-CN/docs/Web/HTML/Attributes/rel/preload) 或 [`rel="modulepreload"`](/zh-CN/docs/Web/HTML/Attributes/rel/modulepreload) 时,HTML 链接正在加载的内容类型。 +- {{domxref("HTMLLinkElement.blocking")}} + - : 一个字符串,指示在获取外部资源时应阻止某些操作。它反映 {{HTMLElement("link")}} 元素的 `blocking` 属性。 +- {{domxref("HTMLLinkElement.crossOrigin")}} + - : 一个字符串,对应于此链接元素的 CORS 设置。有关详细信息,参见 [CORS 设置属性](/zh-CN/docs/Web/HTML/Attributes/crossorigin)。 +- {{domxref("HTMLLinkElement.disabled")}} + - : 一个布尔值,表示链接是否被禁用;当前仅与样式表链接一起使用。 +- {{domxref("HTMLLinkElement.fetchPriority")}} + - : 一个可选的字符串,向浏览器提供关于如何相对于其他同类型资源优先获取预加载资源的提示。如果提供此值,它必须是允许的可能值之一:`high` 表示以较高优先级获取,`low` 表示以较低优先级获取,或者 `auto` 表示没有偏好(这是默认值)。 +- {{domxref("HTMLLinkElement.href")}} + - : 一个字符串,表示目标资源的 URI。 +- {{domxref("HTMLLinkElement.hreflang")}} + - : 一个字符串,表示链接资源的语言代码。 +- {{domxref("HTMLLinkElement.integrity")}} + - : 一个字符串,包含浏览器可以用来验证所获取资源在传输过程中未被意外篡改的内置元数据。它反映 {{HTMLElement("link")}} 元素的 `integrity` 属性。 +- {{domxref("HTMLLinkElement.media")}} + - : 一个字符串,表示资源适用的一个或多个媒体格式列表。它反映 {{HTMLElement("link")}} 元素的 `media` 属性。 +- {{domxref("HTMLLinkElement.referrerPolicy")}} + - : 一个字符串,反映 [`referrerpolicy`](/zh-CN/docs/Web/HTML/Element/link#referrerpolicy) HTML 属性,用于指示应使用哪个来源地址。 +- {{domxref("HTMLLinkElement.rel")}} + - : 一个字符串,表示从文档到链接资源的前向关系。 +- {{domxref("HTMLLinkElement.relList")}} {{ReadOnlyInline}} + - : 一个 {{domxref("DOMTokenList")}},它反映 [`ref`](/zh-CN/docs/Web/HTML/Element/link#ref) HTML 属性,表现为一系列标记的列表。 +- {{domxref("HTMLLinkElement.sizes")}} {{ReadOnlyInline}} + - : 一个 {{domxref("DOMTokenList")}},它反映 [`sizes`](/zh-CN/docs/Web/HTML/Element/link#sizes) HTML 属性,表现为一系列标记的列表。 +- {{domxref("HTMLLinkElement.sheet")}} {{ReadOnlyInline}} + - : 返回与给定元素相关联的 {{domxref("StyleSheet")}} 对象,如果没有则返回 `null`。 +- {{domxref("HTMLLinkElement.type")}} + - : 一个字符串,表示链接资源的 MIME 类型。 + +### 已废弃属性 + +- {{domxref("HTMLLinkElement.charset")}} {{deprecated_inline}} + - : 一个字符串,表示目标资源的字符编码。 +- {{domxref("HTMLLinkElement.rev")}} {{deprecated_inline}} + + - : 一个字符串,表示从资源到文档的反向链接关系。 + + > [!NOTE] + > 当前,W3C 的 HTML 5.2 规范指出 `rev` 属性已不再废弃,然而 WHATWG 的实时标准(living standard)仍然将其标记为废弃。在这一差异得到解决之前,你仍应认为它是废弃的。 + +- {{domxref("HTMLLinkElement.target")}} {{deprecated_inline}} + - : 一个字符串,表示资源所适用的目标框架的名称。 + +## 实例方法 + +_没有特定的方法,从其父接口 {{domxref("HTMLElement")}} 继承方法。_ + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 实现此接口的 HTML 元素:{{HTMLElement("link")}} diff --git a/files/zh-cn/web/api/htmllinkelement/integrity/index.md b/files/zh-cn/web/api/htmllinkelement/integrity/index.md new file mode 100644 index 00000000000000..d1b4a1d65d3e97 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/integrity/index.md @@ -0,0 +1,45 @@ +--- +title: HTMLLinkElement:integrity 属性 +slug: Web/API/HTMLLinkElement/integrity +l10n: + sourceCommit: 49d15be653576c5f73ec527ee976c5881171b53c +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`integrity`** 属性是一个字符串,包含浏览器可以用来验证所获取资源是否未经意外篡改的内联元数据。 + +它反映 {{HTMLElement("link")}} 元素的 `integrity` 属性。 + +## 值 + +一个字符串。 + +## 示例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.integrity); // 输出:“sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLScriptElement.integrity")}} +- [子资源完整性](/zh-CN/docs/Web/Security/Subresource_Integrity) diff --git a/files/zh-cn/web/api/htmllinkelement/media/index.md b/files/zh-cn/web/api/htmllinkelement/media/index.md new file mode 100644 index 00000000000000..dd61c2bf1a50e8 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/media/index.md @@ -0,0 +1,40 @@ +--- +title: HTMLLinkElement:media 属性 +slug: Web/API/HTMLLinkElement/media +l10n: + sourceCommit: 167bf62480885e850452ea0dfb8d83393cd36ddd +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`media`** 属性是一个字符串,表示资源适用的一个或多个媒体格式的列表。 + +它反映 {{HTMLElement("link")}} 元素的 `media` 属性。 + +## 值 + +一个字符串。 + +## 示例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.media); // 输出:“screen and (min-width: 600px)” +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/api/htmllinkelement/referrerpolicy/index.md b/files/zh-cn/web/api/htmllinkelement/referrerpolicy/index.md index 149b1eea1c574c..7537c7c651be1a 100644 --- a/files/zh-cn/web/api/htmllinkelement/referrerpolicy/index.md +++ b/files/zh-cn/web/api/htmllinkelement/referrerpolicy/index.md @@ -1,14 +1,37 @@ --- -title: HTMLLinkElement.referrerPolicy +title: HTMLLinkElement:referrerPolicy 属性 slug: Web/API/HTMLLinkElement/referrerPolicy +l10n: + sourceCommit: 1a790d83cbfcd76ac05a1b18697597f8d110d2cf --- -{{APIRef}} +{{APIRef("HTML DOM")}} -**`HTMLLinkElement.referrerPolicy`** 反映了 {{HTMLElement("link")}} 元素的 HTML 属性 [`referrerpolicy`](/zh-CN/docs/Web/HTML/Element/link#referrerpolicy),这个属性定义了 {{HTMLElement("link")}} 元素在获取资源时的引用方式。 +{{domxref("HTMLLinkElement")}} 接口的 **`referrerPolicy`** 属性反映 {{HTMLElement("link")}} 元素的 HTML [`referrerpolicy`](/zh-CN/docs/Web/HTML/Element/link#referrerpolicy) 属性,该属性定义获取资源时发送哪个来源地址。 详情请参考 HTTP 标头 {{HTTPHeader("Referrer-Policy")}}。 +## 值 + +一个字符串;以下值之一: + +- `no-referrer` + - : {{HTTPHeader("Referer")}} 标头将被完全省略。请求中不会发送任何来源地址。 +- `no-referrer-when-downgrade` + - : 当协议安全级别保持不变时(例如,HTTP → HTTP、HTTPS → HTTPS),该 URL 会作为来源地址发送,但不会发送到安全级别较低的目的地(例如,HTTPS → HTTP)。 +- `origin` + - : 在所有情况下,仅将文档的源作为来源地址发送。`https://example.com/page.html` 文档将发送来源地址 `https://example.com/`。 +- `origin-when-cross-origin` + - : 在执行同源请求时发送完整的 URL,但在其他情况下仅发送文档的源。 +- `same-origin` + - : 对于[同源策略](/zh-CN/docs/Web/Security/Same-origin_policy),将会发送来源地址,但跨源请求将不包含任何来源地址信息。 +- `strict-origin` + - : 当协议安全级别保持不变(HTTPS → HTTPS)时仅发送文档的源作为来源地址,但不发送到安全性较低的目的地(HTTPS → HTTP)。 +- `strict-origin-when-cross-origin`(默认值) + - : 这是用户代理未指定策略时的默认行为。执行同源请求时发送完整的 URL,仅当协议安全级别保持不变(HTTPS → HTTPS)时发送源,并且不向安全性较低的目的地(HTTPS → HTTP)发送任何标头。 +- `unsafe-url` + - : 在执行同源或跨源请求时发送完整的 URL。此策略会将 TLS 保护的资源的源和路径泄露给不安全的源。请仔细考虑此设置的影响。 + ## 示例 ```js diff --git a/files/zh-cn/web/api/htmllinkelement/rel/index.md b/files/zh-cn/web/api/htmllinkelement/rel/index.md new file mode 100644 index 00000000000000..470645b254c0f1 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/rel/index.md @@ -0,0 +1,38 @@ +--- +title: HTMLLinkElement:rel 属性 +slug: Web/API/HTMLLinkElement/rel +l10n: + sourceCommit: 1a790d83cbfcd76ac05a1b18697597f8d110d2cf +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`rel`** 属性反映 [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) 属性。它是一个字符串,包含由空格分隔的链接类型列表,这些类型指示由 {{HTMLElement("link")}} 元素表示的资源与当前文档之间的关系。 + +此属性最常见的用途是指定一个外部样式表的链接:将属性设置为 `stylesheet`,并将 [`href`](/zh-CN/docs/Web/HTML/Element/link#href) 属性设置为外部样式表的 URL,以便格式化页面。 + +## 值 + +一个字符串。 + +## 示例 + +```js +const links = document.getElementsByTagName("link"); +for (const link of links) { + console.log(link); +} +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 在 {{HTMLElement("a")}} 和 {{HTMLElement("area")}} 元素上对应的属性是 {{domxref("HTMLAnchorElement.rel")}} 和 {{domxref("HTMLAreaElement.rel")}}。 +- 相同的列表,但以标记形式表示:{{domxref("HTMLLinkElement.relList")}} diff --git a/files/zh-cn/web/api/htmllinkelement/rellist/index.md b/files/zh-cn/web/api/htmllinkelement/rellist/index.md new file mode 100644 index 00000000000000..554dfba25bd4dd --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/rellist/index.md @@ -0,0 +1,41 @@ +--- +title: HTMLLinkElement:relList 属性 +slug: Web/API/HTMLLinkElement/relList +l10n: + sourceCommit: 1a790d83cbfcd76ac05a1b18697597f8d110d2cf +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`relList`** 只读属性反映了 [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) 属性。它是一个实时的 {{domxref("DOMTokenList")}},包含表示由 {{HTMLElement("link")}} 元素代表的资源与当前文档之间关系的链接类型集合。 + +该属性本身是只读的,这意味着你不能用另一个 {{domxref("DOMTokenList")}} 来替换它,但返回的列表内容是可以更改的。 + +## 值 + +一个包含字符串的实时 {{domxref("DOMTokenList")}}。 + +## 示例 + +```js +const links = document.getElementsByTagName("link"); +for (const link of links) { + console.log("发现新链接"); + link.relList.forEach((relEntry) => { + console.log(relEntry); + }); +} +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 在 {{HTMLElement("a")}} 和 {{HTMLElement("area")}} 元素上对应的属性是 {{domxref("HTMLAnchorElement.relList")}} 和 {{domxref("HTMLAreaElement.relList")}}。 +- 相同的列表,但以标记形式表示:{{domxref("HTMLLinkElement.rel")}} diff --git a/files/zh-cn/web/api/htmllinkelement/sheet/index.md b/files/zh-cn/web/api/htmllinkelement/sheet/index.md new file mode 100644 index 00000000000000..eabe5cd976c875 --- /dev/null +++ b/files/zh-cn/web/api/htmllinkelement/sheet/index.md @@ -0,0 +1,37 @@ +--- +title: HTMLLinkElement:sheet 属性 +slug: Web/API/HTMLLinkElement/sheet +l10n: + sourceCommit: 1a790d83cbfcd76ac05a1b18697597f8d110d2cf +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLLinkElement")}} 接口的 **`sheet`** 只读属性包含与该元素相关联的样式表。 + +如果 `` 元素使用了 `rel="stylesheet"`,则样式表就与 `HTMLLinkElement` 相关联。 + +## 值 + +一个 {{DOMxRef("StyleSheet")}} 对象,如果没有与元素关联的样式表,则为 `null`。 + +## 示例 + +```html + +