栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

CSS解析器/抽象器?如何将样式表转换为对象

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

CSS解析器/抽象器?如何将样式表转换为对象

在客户端,样式表已经是一个对象。页面加载时,它将解析为树。

假设您有一个以

<html xmlns="http://www.w3.org/1999/xhtml">   <head>     <link href="/styles/global.css" rel="stylesheet" type="text/css" media="screen"/>     <link href="/styles/catalog.css" rel="stylesheet" type="text/css" media="screen"/>     <link href="/styles/banner.css" rel="stylesheet" type="text/css" media="screen"/>

global.css
包含线

#page { background-color: #fff; margin-top: 20px; margin-bottom: 20px; text-align: left; width: 100%; margin-top: 20px; padding: 0px; min-width: 900px; border: none; }#header { background-color: transparent; }#main { background-color: transparent; margin-left: 10px; margin-right: 10px; padding: 8px 0px 8px 0px;}#sidebar { margin-right: 12px; }

然后,为了找到什么设置

background-color
#page
,你需要写
document.styleSheets[0].cssRules[0].style.backgroundColor
,这将返回
#fff
(或
rgb(255,255, 255)
在某些浏览器,我认为)。

假设以上工作表的其他有用信息:

document.styleSheets[0].cssRules[3].cssText //"#sidebar { margin-right: 12px; }"document.styleSheets[0].cssRules[2].selectorText //"#main"

如果您有一个更复杂的选择器(如)

#main div.header a, #main div.headera:visited
,则选择器文本属性将返回整个内容,而不仅仅是返回第一位。

您的具体问题是“如何找出给定选择器的样式表中设置的内容”。这是一种近似的方法:

function findProperty(selector) {   rules = document.styleSheets[0].cssRules   for(i in rules) {      if(rules[i].selectorText==selector) return rules[i].cssText;   }   return false;}findProperty('#sidebar'); //returns "#sidebar { margin-right: 12px; }"

事实是,您以这种方式访问​​的CSS树已经被浏览器解析(因此上面的“近似”)。如果您使用的是Firefox,则不会看到任何

-webkit
样式,因为mozilla只会删除它们。各种浏览器也往往有自己的显示颜色的方式(如上面;如果你的实际.css文件有一个给定的颜色设置为
#fff
,你检查它在Javascript它的解析后,你可能会回来
#fff
#ffffff
rgb(255,255, 255)
)。

上面的内容将告诉您浏览器将CSS表单视为什么;如果您想知道初始.css文件中包含哪些特定的ascii字符,唯一可靠的方法是查看文件本身AFAIK。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/465174.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号