標簽[cssom] - 堆棧內存溢出

[英]At what point in the parsing/rendering process do HTML elements get assigned a box model?

是在 CSSOM 的構建過程中嗎（默認填充/邊框/邊距可能應用於所有節點）？ ...

[英]How to print HTML before DOM tree is parsed?

我在https://web.dev/howbrowserswork/#The_main_flow 讀到，打印網站是一個漸進的過程，不會等到 DOM/CSS/RENDER/LAYOUT 樹被完全解析。重要的是要了解這是一個漸進的過程。為了更好的用戶體驗，渲染引擎會盡快在屏幕上顯示內容。在開始構 ...

JS RegEx 返回一個帶連字符的單詞，然后是另一個單詞/值

[英]JS RegEx to return a hyphenated word and then another word/value

我遇到了一些正則表達式問題，但我的目標是讓這段代碼讀取諸如"background-colour:red;"類的輸入。，驗證語法，然后將“背景顏色”和“紅色”放入數組中。它目前返回["background-colour"] ，但不是紅色，我花了大約一個小時試圖弄清楚。任何人都可以幫助或指出我正 ...

序列化程序化 CSS 樣式表（使用 CSSOM API 的樣式表）？

[英]Serialize programmatic CSS style sheets (stylesheets that use CSSOM API)?

您可以使用document.documentElement.outerHTML將文檔序列化為 HTML 字符串。但是，如果我們將結果粘貼到一個文件中並嘗試將其呈現為 HTML，它不會始終忠實於原始顯示（忽略像canvas這樣的真正動態元素）。為什么？任何在 JS 中使用 CSS 的網站都會有 ...

如何從JavaScript獲取元素的繼承值

[英]How to get the inherited values of element from JavaScript

好的，所以我有一個腳本可以獲取單擊元素的 CSS 屬性值。為此，我避免了window.getComputedStyle()因為它基本上將rem值轉換為px等等......相反，我使用CSSStyleSheet.cssRules只是為了保持實際給定單位的獨創性而不是轉換它們。這確實很好用！但它無 ...

媒體查詢：覆蓋 CSS 規則與定義屏幕特定的 CSS 規則

[英]Media queries: Overriding CSS rules vs defining screen specific CSS rules

我假設，就像鏈接標簽中使用的媒體查詢一樣，我們在 CSS 文件中定義的媒體查詢根據其媒體查詢規則被瀏覽器解析/覆蓋或省略（實際上我知道，雖然 CSS帶有不匹配媒體的鏈接標簽請求的文件無論如何都會被下載，它們不會渲染阻塞瀏覽器）。那么，從 CSSOM 構建優化的角度來看，將適用於所有屏幕設備的通用 ...

如何在 macbook 上檢測設備的屏幕分辨率？

[英]How to detect device's screen resolution on macbook?

據說要計算屏幕實際分辨率，我需要將screen.width乘以window.devicePixelRatio 。這東西在我的一台筆記本電腦上工作得很好，window.screen.width = 1280，乘以像素比 (2) = 2560，根據系統信息這是正確的。但是在我的第二台筆記本電腦上， ...

如何使用 JavaScript 顯示隱藏的偽元素

[英]How to show hidden pseudo-element with JavaScript

我正在使用 CSS 來隱藏表單元素：然后 JavaScript 向他們展示：問題在於偽元素.elementor-select-wrapper::before需要隱藏 select 元素中的向下箭頭。我需要使用 JavaScript onclick 事件顯示箭頭。我嘗試document.get ...

如何使用 JavaScript 創建 CSS 變量？

[英]How can I create CSS variables with JavaScript?

我正在使用:root創建一些 CSS 變量。是否可以使用 JavaScript 而不是 CSS 創建它們？下面是一個簡單的例子： ...

放置外部 css 文件的最佳位置在哪里（性能方面）？

[英]Where is the best place to put external css files (performance-wise)?

我已經閱讀了渲染樹以及它是如何由 CSSOM 和 DOM 樹構成的，並且我希望在我的網站上實現最佳 UI 性能。我想知道 - 我可以為外部 CSS 文件提供哪些最佳實踐，以便它允許最快的 CSSOM 並因此提供最快的渲染樹構建？ ...

getComputedStyle 的規范中是否指定了顏色格式？

[英]Is color format specified in the spec for getComputedStyle?

我正在解析getComputedStyle返回的顏色字符串，以從中獲取R 、 G 、 B和A值。到目前為止（在 Chrome 和 Firefox 中），顏色值似乎總是以易於解析的rgb或rgba格式返回：但是，我無法在其MDN 頁面上列出的getComputedStyle的任何規范中找到任何關 ...

css object model 中禁用屬性的樣式

[英]Style for disabled property in css object model

出於某種原因，我需要使用 CSS object Z20F35E630DAF44DBFA4C3F68F68F 組件內部的 CSS 對象傳遞。在這里，當按鈕被禁用和未被禁用時，我需要 styles 按鈕。就像我們做的：backgroundColor、borderRadius 等等。這是我嘗試使用它 ...

VisualViewport.offsetTop 和 VisualViewport.pageTop 有什么區別？

[英]What's the difference between VisualViewport.offsetTop and VisualViewport.pageTop?

規格在這里， https://wicg.github.io/visual-viewport/ ，但我無法理解其中的區別。 “初始包含塊原點”坐標不是總是與布局視口坐標相同嗎？謝謝你。 ...

在 javascript 中更改 CSSOM css 樣式屬性

[英]Changing the CSSOM css style properties in javascript

我正在嘗試使用 style.cssText 使用 javascript 顯示隱藏的段落。這是我的代碼： html： css： js：我也試過請看codepen： Codepen 請讓我知道我應該如何解決這個問題。 ...

瀏覽器中 CSS/HTML/JS 依賴的簡單說明

[英]Simple Explanation of CSS/HTML/JS dependencies in browser

我只是想驗證我是否正確理解這一點。當瀏覽器收到 HTML 頁面時，它將開始將 HTML 解析到 DOM 中，並將任何樣式標簽解析到 CSSOM 中。在遇到任何資源請求時，將這些請求發送到服務器。遇到內聯或外部<script>標記時停止將 HTML 解析為 DOM 例外：如果外部腳本 ...

canvas 已被帶有 computedStyleMap().get(“background-image”) 的跨域數據污染

[英]The canvas has been tainted by cross-origin data with computedStyleMap().get(“background-image”)

<div id='img3'>background-image with this</div> #img3 { background-image: url("../icons/we-flow.png"); } var img = img3.computedStyleMap ...

為什么 backgroundimage 在 chrome 中不是 cssImageValue？我如何使用 canvas 處理背景圖像但不制作新圖像？

[英]why backgroundimage is not cssImageValue in chrome? how can i use canvas deal with background-image but not make a new image?

基於這篇文章： https://developer.mozilla.org/en-US/docs/Web/API/CSSImageValueconst allComputedStyles = button.computedStyleMap(); // Return the CSSImageVal ...

我如何使用 javascript 檢查 css 屬性是否具有？在 chrome 中是否重要？

[英]How can i use javascript to check if a css property has !important in chrome?

現在是 2020 年，我的目標只是 chrome。我只想在 chrome 上檢查它，所以這不是同一個問題。我的最終目標是避免無限觀察循環。這是我的代碼：.bg-gray-light { background-color: #fafbfc!important; } var e=docu ...

CSS Typed OM——解析背景顏色？

[英]CSS Typed OM -- parsing background color?

const box = document.getElementById('rb'); console.log(box.computedStyleMap().get('background-color')) .red { background-color: #FF0000; } . ...

CSSOM（CSS Object Model）的根元素是如何確定的

[英]How is the root element of the CSSOM (CSS Object Model) determined

我一直在研究瀏覽器渲染，我剛剛進入渲染過程中瀏覽器從原始 CSS 構建 CSSOM 的部分。在我看過的所有教程中，作者似乎都假設/斷言body元素是根元素，並且所有應用於 body 的樣式都將默認應用於 DOM 的其余部分，除非被另一個選擇器明確覆蓋. 一個例子在這里https://blog.l ...