JavaScript读取元素的CSS信息
|
在前端开拓的事变中，老是会涉及到一些JavaScript和CSS信息交互的内容。好比为某个HTML元素级联了一组样式信息，个中width属性的值为80px。然后挪用剧本读取这个值，获得的功效老是一个空字符串，而究竟上我想获得"80px"。针对这种环境，David Flanagan在《JavaScript 势力巨子指南》(第五版)一书中给出了办理方案。 以下是针对JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4的翻译 剧本计较的样式 HTML元素的style属性相等于style HTML 特征， 而作为style属性的值，CSS2属性工具只为这样的一个元素内联样式信息。这并不包罗CSS级联内里的任何其他样式。偶然你简直想知道确切的赋予某个元素的样式配置，同时忽略掉在级联内里的样式。你想要做的就是为元素计较样式。很不幸被计较的样式的名字是暗昧的;它与在赏识器表现元素之前被执行的计较相干：全部的样式均被实行可否合用于元素，而且全部合用的样式被归并在元素的任何内嵌样式中。这种聚积后的样式信息可以或许被用于正确的将元素示意在赏识器窗口中。在W3C尺度中，用于抉择元素被计较样式的API是window工具的getComputedStyle()要领。这个要领的第一个参数是祈望被计较样式的元素。第二个参数是任何祈望的CSS伪工具，好比":before"可能":after"。你很也许不会对伪工具感乐趣，可是在Mozilla和Firefox对付该要领的实现中，第二个参数是不能被忽略的。 不然，因为它的第二个参数，你老是会发明getComputedStyle()激发null。getComputedStyle()的返回值是一个示意全部加载确定元素可能伪工具的样式的CSS2属性工具。与CSS2属性工具可以或许节制内嵌样式信息差异，getComputedStyle()返回的工具是只读的。IE不支持getComputedStyle()要领，可是提供了一个更简朴的更换方案。每个HTML元素有一个currentStyle属性可以节制它被计较的样式。IE的这个API独一的弱点就是它不能提供一个查询伪工具样式的方法。作为被计较样式的的一个例子，你可以行使如下的跨平台的代码来确认元素被示意的字型： Copy to Clipboard 引用的内容：[www.veryhuo.com]
var p = document.getElementsByTagName("p")[0]; // Get first paragraph of doc var typeface = ""; // We want its typeface if (p.currentStyle) // Try simple IE API first typeface = p.currentStyle.fontFamily; else if (window.getComputedStyle) // Otherwise use W3C API typeface = window.getComputedStyle(p, null).fontFamily; 计较样式很快，并且它并不老是提供你想要的信息。思量适才字型的例子。font-family属性接管了一个逗号脱离的列表，轻松的为跨平台提供了被祈望的字体范例。当你查询被计较的fontFamily属性时，你很轻易获得确定的加在元素上的font-family样式的值。这或者返回一个值相同于"arial,helvetica,sans-serif",却并不汇报你毕竟哪个字型才是真正正在行使的。相同的，假如一个元素没有被绝对定位，而阴谋通过被计较样式的top和left属性查询它的位置和巨细，功效老是返回"auto"。这是一个完全正当的CSS值，只是它并不是你想要的。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
