问题标签 [cssom]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
17248 浏览

javascript - 为什么要引入 window.scrollY 和 window.scrollX?

据我所知,pageXOffset/pageYOffset自 Netscape 4 时代以来,属性就已经可用。
它似乎scrollX/scrollY是在 Netscape 6 中引入的。

替代问题:

Q2。有没有实现scrollX/scrollY但不支持pageXOffset/pageYOffset的浏览器?

我将添加第三个问题,因为没有人能够回答前面的问题:

Q3。最新的CCSOM编辑草稿中增加了scrollX/scrollY,而工作草稿只有pageXOffset/pageYOffset,为什么要保留这两个属性?

0 投票
3 回答
1451 浏览

javascript - 这个空字符串是什么意思?

有一个空字符串分配给heightdisplayCSS 属性(通过 CSSOM)。在这种情况下是什么意思?

0 投票
1 回答
86 浏览

javascript - 在 javascript 中分配属性引用

我正在编写一个小的 javascript 脚本来编辑 CSS 代码,我发现与其他浏览器相比,Internet Explorer 有很多……特殊性,如果我可以这么说的话。例如,document.stylesheet 对象的规则对象在大多数浏览器中称为 cssRule,在 IE 中称为规则。

我想在这里做的是分配包含窗口大小(window.innerWidth & document.body.clientWidth)的对象的属性的引用,以避免每次检查是否应该使用 IE 对象名称或“正常”的一个。

这是一个好/坏主意吗?

在发布问题之前,我想了更多关于它并想出了一个解决方案..

有没有另一种/更好的方法来做到这一点?

谢谢

(是的,我知道这样做真的没有必要,特别是因为我正在制作一个小脚本并且性能并不是一个真正的问题,但我主要是好奇。)

0 投票
4 回答
2701 浏览

javascript - 为什么 scrollWidth 只包含左侧填充?

所以,我有#Wrapper一个固定宽度的 DIV。在那个 DIV 里面,我有另一个 DIV #Panel,它也有一个固定的宽度:

有时,Panel 的宽度大于 Wrapper 的宽度,在这种情况下,我想通过 JavaScript 加宽 Wrapper,使其完美地包裹 Panel。

现场演示:http: //jsfiddle.net/H6rML/

我打算.scrollWidth在 Wrapper 上使用来确定 Panel 的宽度。但是,问题在于 Wrapper 具有水平填充,并且由于.scrollWidth某种原因仅包括 wrapper 的左侧填充。所以:

所以,给定:

Wrapper.scrollWidthreturn 310px,这不是很有用。如果.scrollWidth不包含任何填充并且只返回面板的宽度,我可以使用它(我会手动将填充添加到该值)。如果两个填充都包括在内,我也可以使用它。但是为什么只包括左边的填充?(顺便说一句,这种行为似乎是跨浏览器的。)

一些附加说明:

  1. 我无法直接在 Wrapper 上设置宽度。在我的实际代码中,我在比 Wrapper 高几级的祖先元素上设置了宽度,并使用自定义 API 来设置宽度。这就是为什么我需要检索全部320px价值。

  2. 我想要一个不依赖于 Wrapper 内容的解决方案。在我的演示中,它是一个面板,但在其他情况下,可能会有不同的元素溢出,甚至是多个元素。这就是我.scrollWidth选择 Wrapper 的原因。

有没有一种方法可以获取值320px而无需手动为值添加正确的填充.scrollWidth


顺便说一句,根据标准,应该包括正确的填充:

scrollWidth 属性必须返回运行这些步骤的结果:

  1. 如果元素没有任何关联的 CSS 布局框,则返回零并终止这些步骤。

  2. 如果元素是根元素并且 Document 不是 quirks 模式,则返回 max(document content width, value of innerWidth)。

  3. 如果元素是 HTML body 元素并且 Document 处于 quirks 模式,则返回 max(document content width, value of innerWidth)。

  4. 返回“padding-left”属性的计算值,加上“padding-right”的计算值,再加上元素的内容宽度。

资料来源:http ://www.w3.org/TR/cssom-view/

为什么浏览器的行为不相应?


为了进一步提高我的帖子的清晰度,让我总结两个主要问题:

(1) 如果标准规定应该在.scrollWidth值中包含正确的填充,那么为什么浏览器不采取相应的行为呢?

(2) 是否可以检索正确的值(320px在我的情况下),而无需手动添加正确的填充?


这个问题已经在另一个帖子里回答了

这个问题的答案在这里:当子元素水平溢出时,为什么忽略了父元素的右填充?

​</p>

0 投票
1 回答
296 浏览

javascript - 如何获取浏览器不支持的 CSS 属性的值?

所以我正在寻找浏览器不支持的 CSS 属性的值。这是我想用来创建 polyfill 的东西,但我需要在任何给定时间知道属性的值。

这是一个包含我迄今为止尝试过的所有方法的测试文件。基本上,鉴于以下情况:

rotate(2deg)无论浏览器是否支持,我都希望能够通过 JavaScript 获取该值。这可能吗?如果是这样,是否有一种预先的方法来做到这一点(我需要在旧浏览器中做很多事情)?

如果可能的话,一些偏好:

  • 宁愿从一个元素中执行此操作,而不是循环遍历样式表的规则
  • 至少需要支持 IE 7(或有方法支持)
  • 不应该花费 2 秒来计算。我想要一些能体面地表演的东西
0 投票
2 回答
942 浏览

javascript - 为什么 getComputedStyle 不考虑边距折叠?

关于浏览器内的 Javascript,该window.getComputedStyle()方法应该给出应用于元素的 CSS 属性的最终使用值。根据MDN 文档,这意味着“在执行了所有计算之后”。

但是,似乎“所有计算”不包括保证金崩溃。在 Firefox 和 Chrome 中(至少),该指令getComputedStyle().marginBottom在计算任何边距折叠之前返回计算值。

例如,考虑以下元素:

它的顶部和底部边距将被折叠,因为(大致)其内容高度为零(参见W3C CSS2 建议)。CSSOM 方法将返回这些值:

但是,由于边距折叠,布局在边界客户矩形之前显示了 10px 的边距,在之后显示了 5px 的边距,即max(0, marginBottom - marginTop).

为什么不getComputedStyle().marginBottom直接返回 5px,即“所有计算完成后”的实际使用值,而不是指定的 15px?这是 W3C 推荐的行为吗?(我在 w3.org 文档中没有看到任何关于此的内容。)

这是错误还是功能?

0 投票
1 回答
466 浏览

javascript - Getting stylesheet object from ownerNode(style tag)

I have a multiple style tags in my webpage, and i want to manipulate the cssRules in them. How can I get the styleSheet as in document.styleSheets object from a style element. A way could be scanning all the styleSheets in document.styleSheets and match its ownerNode with my style element object. Is there any better way that this?

0 投票
2 回答
1311 浏览

javascript - WebKit/Phantomjs 为什么 getComputedStyles 的输出是这样的?

在大多数浏览器(例如 Firefox、Opera)上,获取元素的计算样式会返回一个不错的类型对象CSSStyleDeclaration。在 Chrome 28 和 PhantomJS 1.9 上,我得到一个以编号键开头的对象,列出所有 CSS 属性,然后是属性(如果是 Chrome)。

例如,在歌剧中: 在此处输入图像描述

在 Chrome 28 中: 在此处输入图像描述

然后最终你会得到有用的部分: 在此处输入图像描述

在 PhantomJS 1.9 中更糟糕的是,你得到了编号的属性,然后只有两个命名属性:长度和 cssText。

0 投票
1 回答
463 浏览

javascript - 下载 CSS 后,CSS 解析和 DOM 解析是否并行

我知道,当浏览器在解析 html 时看到脚本标记时,它会停止执行并让脚本执行它,然后再次开始解析 dom。

CSS也会发生同样的事情吗?或者 CSSOM 解析和 dom 解析可以并排。

更新

我认为我的问题并不清楚,我没有询问 css 加载的顺序,我知道 CSS 文件是按照它们包含的顺序添加的。我的问题是,一旦它们被下载,浏览器就会进行 CSS 解析,同时浏览器会停止 dom 解析,就像我们在加载脚本时遇到的情况一样。我希望我的问题现在很清楚。

0 投票
2 回答
1200 浏览

javascript - 检索 CSS 是否需要“getPropertyValue”方法?

getPropertyValue如果我们只能使用一种方法,你能告诉我为什么我们需要使用这种方法getComputedStyle吗?

例如,据我了解,这将起作用:

这相当于以下内容:

我们可以getComputedStyle不使用getPropertyValue吗?