问题标签 [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.
javascript - 为什么要引入 window.scrollY 和 window.scrollX?
据我所知,pageXOffset/pageYOffset
自 Netscape 4 时代以来,属性就已经可用。
它似乎scrollX/scrollY
是在 Netscape 6 中引入的。
替代问题:
Q2。有没有实现scrollX/scrollY但不支持pageXOffset/pageYOffset的浏览器?
我将添加第三个问题,因为没有人能够回答前面的问题:
Q3。最新的CCSOM编辑草稿中增加了scrollX/scrollY,而工作草稿只有pageXOffset/pageYOffset,为什么要保留这两个属性?
javascript - 这个空字符串是什么意思?
有一个空字符串分配给height
和display
CSS 属性(通过 CSSOM)。在这种情况下是什么意思?
javascript - 在 javascript 中分配属性引用
我正在编写一个小的 javascript 脚本来编辑 CSS 代码,我发现与其他浏览器相比,Internet Explorer 有很多……特殊性,如果我可以这么说的话。例如,document.stylesheet 对象的规则对象在大多数浏览器中称为 cssRule,在 IE 中称为规则。
我想在这里做的是分配包含窗口大小(window.innerWidth & document.body.clientWidth)的对象的属性的引用,以避免每次检查是否应该使用 IE 对象名称或“正常”的一个。
这是一个好/坏主意吗?
在发布问题之前,我想了更多关于它并想出了一个解决方案..
有没有另一种/更好的方法来做到这一点?
谢谢
(是的,我知道这样做真的没有必要,特别是因为我正在制作一个小脚本并且性能并不是一个真正的问题,但我主要是好奇。)
javascript - 为什么 scrollWidth 只包含左侧填充?
所以,我有#Wrapper
一个固定宽度的 DIV。在那个 DIV 里面,我有另一个 DIV #Panel
,它也有一个固定的宽度:
有时,Panel 的宽度大于 Wrapper 的宽度,在这种情况下,我想通过 JavaScript 加宽 Wrapper,使其完美地包裹 Panel。
现场演示:http: //jsfiddle.net/H6rML/
我打算.scrollWidth
在 Wrapper 上使用来确定 Panel 的宽度。但是,问题在于 Wrapper 具有水平填充,并且由于.scrollWidth
某种原因仅包括 wrapper 的左侧填充。所以:
所以,给定:
Wrapper.scrollWidth
return 310px
,这不是很有用。如果.scrollWidth
不包含任何填充并且只返回面板的宽度,我可以使用它(我会手动将填充添加到该值)。如果两个填充都包括在内,我也可以使用它。但是为什么只包括左边的填充?(顺便说一句,这种行为似乎是跨浏览器的。)
一些附加说明:
我无法直接在 Wrapper 上设置宽度。在我的实际代码中,我在比 Wrapper 高几级的祖先元素上设置了宽度,并使用自定义 API 来设置宽度。这就是为什么我需要检索全部
320px
价值。我想要一个不依赖于 Wrapper 内容的解决方案。在我的演示中,它是一个面板,但在其他情况下,可能会有不同的元素溢出,甚至是多个元素。这就是我
.scrollWidth
选择 Wrapper 的原因。
有没有一种方法可以获取值320px
而无需手动为值添加正确的填充.scrollWidth
?
顺便说一句,根据标准,应该包括正确的填充:
scrollWidth 属性必须返回运行这些步骤的结果:
如果元素没有任何关联的 CSS 布局框,则返回零并终止这些步骤。
如果元素是根元素并且 Document 不是 quirks 模式,则返回 max(document content width, value of innerWidth)。
如果元素是 HTML body 元素并且 Document 处于 quirks 模式,则返回 max(document content width, value of innerWidth)。
返回“padding-left”属性的计算值,加上“padding-right”的计算值,再加上元素的内容宽度。
资料来源:http ://www.w3.org/TR/cssom-view/
为什么浏览器的行为不相应?
为了进一步提高我的帖子的清晰度,让我总结两个主要问题:
(1) 如果标准规定应该在.scrollWidth
值中包含正确的填充,那么为什么浏览器不采取相应的行为呢?
(2) 是否可以检索正确的值(320px
在我的情况下),而无需手动添加正确的填充?
这个问题已经在另一个帖子里回答了
这个问题的答案在这里:当子元素水平溢出时,为什么忽略了父元素的右填充?
</p>
javascript - 如何获取浏览器不支持的 CSS 属性的值?
所以我正在寻找浏览器不支持的 CSS 属性的值。这是我想用来创建 polyfill 的东西,但我需要在任何给定时间知道属性的值。
这是一个包含我迄今为止尝试过的所有方法的测试文件。基本上,鉴于以下情况:
rotate(2deg)
无论浏览器是否支持,我都希望能够通过 JavaScript 获取该值。这可能吗?如果是这样,是否有一种预先的方法来做到这一点(我需要在旧浏览器中做很多事情)?
如果可能的话,一些偏好:
- 宁愿从一个元素中执行此操作,而不是循环遍历样式表的规则
- 至少需要支持 IE 7(或有方法支持)
- 不应该花费 2 秒来计算。我想要一些能体面地表演的东西
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 文档中没有看到任何关于此的内容。)
这是错误还是功能?
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?
javascript - WebKit/Phantomjs 为什么 getComputedStyles 的输出是这样的?
在大多数浏览器(例如 Firefox、Opera)上,获取元素的计算样式会返回一个不错的类型对象CSSStyleDeclaration
。在 Chrome 28 和 PhantomJS 1.9 上,我得到一个以编号键开头的对象,列出所有 CSS 属性,然后是属性(如果是 Chrome)。
例如,在歌剧中:
在 Chrome 28 中:
然后最终你会得到有用的部分:
在 PhantomJS 1.9 中更糟糕的是,你得到了编号的属性,然后只有两个命名属性:长度和 cssText。
javascript - 下载 CSS 后,CSS 解析和 DOM 解析是否并行
我知道,当浏览器在解析 html 时看到脚本标记时,它会停止执行并让脚本执行它,然后再次开始解析 dom。
CSS也会发生同样的事情吗?或者 CSSOM 解析和 dom 解析可以并排。
更新
我认为我的问题并不清楚,我没有询问 css 加载的顺序,我知道 CSS 文件是按照它们包含的顺序添加的。我的问题是,一旦它们被下载,浏览器就会进行 CSS 解析,同时浏览器会停止 dom 解析,就像我们在加载脚本时遇到的情况一样。我希望我的问题现在很清楚。
javascript - 检索 CSS 是否需要“getPropertyValue”方法?
getPropertyValue
如果我们只能使用一种方法,你能告诉我为什么我们需要使用这种方法getComputedStyle
吗?
例如,据我了解,这将起作用:
这相当于以下内容:
我们可以getComputedStyle
不使用getPropertyValue
吗?