问题标签 [computed-style]
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 - currentStyle 与 getComputedStyle 的 Firefox 问题
我正在尝试根据它的 CSS 规则获取元素的宽度问题是“getComputedStyle”对于没有设置 CSS 宽度值的元素返回一个像素值而不是“自动”。在 Opera 中,“elem.currentStyle['width']”返回“auto”,但在 Firefox 中,它必须使用“getComputedStyle”返回类似“1149px”的内容。
了解实际的 CSS 规则是什么对我来说至关重要。除了 getComputedStyle 之外,还有其他方法吗?Firefox MDN明确表示“getComputedStyle”不是要走的路,但我找不到任何与“currentStyle”等效的 Firefox 文档。
如果你想知道,我的最终目标是找到页面上最大的静态宽度元素。如果我无法读取样式表值 - 只能渲染/计算值 - 那么我该如何实现呢?
javascript - 如何从 HTML 页面中提取完整的 DOM 树
我必须比较两个网页并分析它们之间是否有任何区别。问题是:我需要包含每个 DOM 元素(也是通过 javascript 动态添加的元素),并且我需要包含所有应用的 CSS 设置(又名计算样式)。
例如:如果:hover
定义了 CSS 设置,当鼠标悬停在元素上时,我需要得到不同的结果,而不是在元素上时。
也许我可以对页面的每个元素进行 javascript 迭代,询问每个 css 设置和每个子 DOM 元素。但我认为这会花费很长时间,并且会破坏生成的 DOM 并使其更难以比较。
有任何想法吗??谢谢!!
html - 即使使用了 reset.css,也无法删除 div 之间的额外边距/填充
在过去的 1.5 小时里,我一直在尝试我所知道的一切,但无法弄清楚这一点。实际上,据我所知,margin 和 padding为0,但是,包含的 div 到目前为止,莫名其妙地比包含的图像宽 4px 和高 1px。我不知道那是从哪里来的。
可能导致这种情况的几件事:
- 我正在通过 javascript 将图像的最大宽度和最大高度设置为窗口的大小。
- 我正在使用表格、表格单元格和内联块的组合来以我需要的方式设置排版。
- 还可以使用 100% 宽度和高度的 body 和 html
- 这是一个 Tumblr 主题定制(虽然是从头开始)
代码方面,很难把所有的东西都放在这里,所以现在,我只给出链接。
希望如果可以解决这个问题,我将能够在这个问题中发布问题代码,以便将来参考。
谢谢
javascript - getComputedStyle 对象包含方法?
我在这里设置了一个演示:http: //jsbin.com/evifeb/
这更多的是我大声思考而不是一个正确的问题,但是..
为什么浏览器将样式规则与边方法和保留字一起直接插入计算样式对象中?它只是使解析变得困难。例如,您可能会在我的演示中注意到,我过滤掉了除字符串和数字之外的所有内容。这是为了清除同一范围内的函数。虽然,这不是 100% 准确的,因为长度属性值是一个数字。为什么没有像“getAllStyles”这样的原型函数,它返回一个没有废话的样式对象?
好的,所以我知道“getPropertyValue”,但这仅在您想要指定的样式规则时才有用。所以我想我想说的是:A)是否有适当的方法来返回这样的交叉对象浏览器安全吗?和 B)如果没有,除了长度之外是否还有其他属性(不在 css 规范中)需要清除?
非常感谢帮忙。我已经准备好拔牙了。
javascript - 如何在整个 DOM 中查询匹配某些计算样式的元素?(纯js)
例如,我想查找所有具有计算样式的元素position: fixed;
。如何在不对 CPU 造成太大负载的情况下做到这一点?
每次迭代getElementsByTagName('*')
然后做for循环是唯一的方法吗?
performance - 使用 javascript 在 Chrome 上获取当前样式时速度太慢
我被一个愚蠢的问题困住了。下面是我获取 dom 的计算样式的代码。它在 FireFox 甚至 IE 上运行良好(惊讶)!但在 chrome v17 上速度太慢(慢 20 倍)。如何避免问题?
请帮忙!
javascript - 导出 DOM 的当前样式
是否有 JavaScript DOM API 来获取节点或节点集的当前样式信息(选择器及其关联的 CSS 规则、宽度和高度属性、样式属性等)并将它们保存到 XML 文档或类似文件中?
我想做自动比较测试。
谢谢你的帮助。
jquery - 根据内容动态调整 iframe 高度
关于如何动态更改 iframe 高度有很多答案。我尝试了插件https://github.com/house9/jquery-iframe-auto-height
该插件适用于 iframe 加载,但是,如果内容不重新加载(例如 ajax),高度不会根据 iframe 内容内的变化动态变化。
我的问题是:如何在内容改变高度时动态改变 iframe 的高度?
jquery - 我将字体大小设置为 16pt,但是当我获取它时,它返回 21px。我可以让它返回pt吗?
可能重复:
让 jquery 以点为单位返回字体大小
使用 jQuery,我将某些内容设置为 16pt,因为这是我以前版本的 Web 应用程序所做的。问题是在我将代码设置如下之后的某个时间点:
我需要去拿它。当我获取它时,它不会返回 16pt,而是 21px。是否有我可以使用的转换率,或者获取 16pt 的方法?
您是否需要传递一个选项,或者以不同的方式处理它?
作为对这个问题的跟进,我注意到在我正在构建的东西上,事情看起来并不像他们应该的那样。保存我的数据的文本框似乎保存了某些信息。您知道为什么以下内容不起作用吗?
javascript - 如何在 window.load 之前获得计算的 CSS 样式?
我有一个自定义幻灯片页面,其中包含数百张大图片的标记。此外,还有一个布局调整,单靠 CSS 无法完成,需要 javascript。该调整取决于几个页面元素的计算 CSS 样式。
这是问题所在:获得计算的 CSS 样式(document).ready
似乎不起作用。这很有意义,因为当仅注册 DOM 时,还没有发生布局/绘制。
(window).load
是显而易见的答案。但在这种情况下,等待时间(window).load
长得令人抓狂,因为下载所有 100 多张大图像实际上需要 30 秒(在慢速连接上更长!)。原则上这对幻灯片来说很好,因为一旦加载了前两个图像,幻灯片就开始可用,早在加载所有图像之前。问题是,我希望脚本化的 CSS 布局更正也发生在那个时候。
为了检查正在加载的 imgs,我使用了 imageLoaded,这很棒,并且在load
与 imgs 一起使用时解决了 jquery 事件的问题。但是如何检查页面元素(例如 div)上的“加载”类事件(以及计算样式的可用性)?(我意识到 div 不会触发加载事件。)原则上,两者之间是否存在可靠的跨浏览器 DOM 事件,(document).ready
并且(window).load
我可以在一组特定元素上侦听以获取计算样式?还是我被迫在这两个时间极端之间做出选择?