普陀网站建设比较实惠,网络项目计划书,做网站怎样赚卖流量,网站导航素材下载定义#xff1a; CSS对象模型是一组允许用JavaScript操纵CSS的API#xff0c;他很像DOM#xff0c;但针对的是CSS而不是HTML。它允许用户动态地读取和修改CSS样式 CSS的值是没有类型的#xff0c;也就是使用String对象来表示
下面列一些常用的API
对象#xff1a;
1. C…定义 CSS对象模型是一组允许用JavaScript操纵CSS的API他很像DOM但针对的是CSS而不是HTML。它允许用户动态地读取和修改CSS样式 CSS的值是没有类型的也就是使用String对象来表示
下面列一些常用的API
对象
1. CSS.escape() 用于转义css里面的特殊字符
div idfoo#bar/div
上面代码中该元素的id属性包含一个#号该字符在 CSS 选择器里面有特殊含义。不能直接写成document.querySelector(#foo#bar)只能写成document.querySelector(#foo\\#bar)
CSS.escape方法就用来转义那些特殊字符。
document.querySelector(# CSS.escape(foo#bar))2. CSS.supports 返回一个布尔值表示当前环境是否支持某一句CSS规则。
它的参数有两种写法一种是第一个参数是属性名第二个参数是属性值另一种是整个参数就是一行完整的 CSS 语句。
// 第一种写法
CSS.supports(transform-origin, 5px) // true
// 第二种写法
CSS.supports(display: table-cell) // true
注意第二种写法的参数结尾不能带有分号否则结果不准确。
CSS.supports(display: table-cell;) // false
3. window.getComputedStyle() 返回浏览器计算后得到的最终规则。它接受一个节点对象作为参数返回一个 CSSStyleDeclaration 实例
getComputedStyle方法还可以接受第二个参数表示当前元素的伪元素比如:before、:after、:first-line、:first-letter等。
注意
CSSStyleDeclaration 实例返回的 CSS 值都是绝对单位。比如长度都是像素单位返回值包括px后缀颜色是rgb(#, #, #)或rgba(#, #, #, #)格式。CSS 规则的简写形式无效。比如想读取margin属性的值不能直接读只能读marginLeft、marginTop等属性再比如font属性也是不能直接读的只能读font-size等单个属性。如果读取 CSS 原始的属性名要用方括号运算符比如styleObj[z-index]如果读取骆驼拼写法的 CSS 属性名可以直接读取styleObj.zIndex。该方法返回的 CSSStyleDeclaration 实例的cssText属性无效返回undefined
4. StyleSheet 接口
StyleSheet接口代表网页的一张样式表包括link元素加载的样式表和style元素内嵌的样式表。
var sheets document.styleSheets;
严格地说StyleSheet接口不仅包括网页样式表还包括 XML 文档的样式表。所以它有一个子类CSSStyleSheet表示网页的 CSS 样式表。我们在网页里面拿到的样式表实例实际上是CSSStyleSheet的实例。这个子接口继承了StyleSheet的所有属性和方法并且定义了几个自己的属性。
实例属性 (1) StyleSheet.disabled 返回一个布尔值表示该样式表是否处于禁用状态。手动设置disabled属性为true等同于在link元素里面将这张样式表设为alternate stylesheet即该样式表将不会生效。 (2) Stylesheet.href 返回样式表的网址。对于内嵌样式表该属性返回null。该属性只读。 (3) StyleSheet.media 属性返回一个类似数组的对象MediaList实例成员是表示适用媒介的字符串。表示当前样式表是用于屏幕screen还是用于打印print或手持设备handheld或各种媒介都适用all。该属性只读默认值是screen。
document.styleSheets[0].media.mediaText // all
MediaList实例的appendMedium方法用于增加媒介deleteMedium方法用于删除媒介。
document.styleSheets[0].media.appendMedium(handheld);
document.styleSheets[0].media.deleteMedium(print); (4) StyleSheet.title 属性返回样式表的title属性。 (5) StyleSheet.type 属性返回样式表的type属性通常是text/css (6) StyleSheet.parentStyleSheet CSS 的import命令允许在样式表中加载其他样式表。StyleSheet.parentStyleSheet属性返回包含了当前样式表的那张样式表。如果当前样式表是顶层样式表则该属性返回null。 (7) StyleSheet.ownerNode 属性返回StyleSheet对象所在的 DOM 节点通常是link或style。对于那些由其他样式表引用的样式表该属性为null。 (8) CSSStyleSheet.cssRules 属性指向一个类似数组的对象CSSRuleList实例里面每一个成员就是当前样式表的一条 CSS 规则。使用该规则的cssText属性可以得到 CSS 规则对应的字符串。 (9) CSSStyleSheet.ownerRule 有些样式表是通过import规则输入的它的ownerRule属性会返回一个CSSRule实例代表那行import规则。如果当前样式表不是通过import引入的ownerRule属性返回null。
实例添加样式表
网页添加样式表有两种方式。一种是添加一张内置样式表即在文档中添加一个style节点。
// 写法一
var style document.createElement(style);
style.setAttribute(media, screen);
style.innerHTML body{color:red};
document.head.appendChild(style);
// 写法二
var style (function () {var style document.createElement(style);document.head.appendChild(style);return style;
})();
style.sheet.insertRule(.foo{color:red;}, 0);
另一种是添加外部样式表即在文档中添加一个link节点然后将href属性指向外部样式表的 URL。
var linkElm document.createElement(link);
linkElm.setAttribute(rel, stylesheet);
linkElm.setAttribute(type, text/css);
linkElm.setAttribute(href, reset-min.css);
document.head.appendChild(linkElm);
CSSRuleList 接口是一个类似数组的对象表示一组 CSS 规则成员都是 CSSRule 实例。
获取 CSSRuleList 实例一般是通过StyleSheet.cssRules属性。
// style idmyStyle
// h1 { color: red; }
// p { color: blue; }
// /style
var myStyleSheet document.getElementById(myStyle).sheet;
var crl myStyleSheet.cssRules;
crl instanceof CSSRuleList // true
CSSRuleList 实例里面每一条规则CSSRule 实例可以通过rules.item(index)或者rules[index]拿到。CSS 规则的条数通过rules.length拿到。还是用上面的例子。
crl[0] instanceof CSSRule // true
crl.length // 2 注意添加规则和删除规则不能在 CSSRuleList 实例操作而要在它的父元素 StyleSheet 实例上通过StyleSheet.insertRule()和StyleSheet.deleteRule()操作。
CSSRule 接口
一条 CSS 规则包括两个部分CSS 选择器和样式声明。下面就是一条典型的 CSS 规则。
JavaScript 通过 CSSRule 接口操作 CSS 规则。一般通过 CSSRuleList 接口StyleSheet.cssRules获取 CSSRule 实例。
// style idmyStyle
// .myClass {
// color: red;
// background-color: yellow;
// }
// /style
var myStyleSheet document.getElementById(myStyle).sheet;
var ruleList myStyleSheet.cssRules;
var rule ruleList[0];
rule instanceof CSSRule // true
CSSRule 实例的属性
1CSSRule.cssText 属性返回当前规则的文本还是使用上面的例子。
rule.cssText
// .myClass { color: red; background-color: yellow; }
如果规则是加载import其他样式表cssText属性返回import url。
2CSSRule.parentStyleSheet 属性返回当前规则所在的样式表对象StyleSheet 实例还是使用上面的例子。
rule.parentStyleSheet myStyleSheet // true
3CSSRule.parentRule 属性返回包含当前规则的父规则如果不存在父规则即当前规则是顶层规则则返回null。
父规则最常见的情况是当前规则包含在media规则代码块之中。
// HTML 代码如下
// style idmyStyle
// supports (display: flex) {
// media screen and (min-width: 900px) {
// article {
// display: flex;
// }
// }
// }
// /style
var myStyleSheet document.getElementById(myStyle).sheet;
var ruleList myStyleSheet.cssRules;
var rule0 ruleList[0];
rule0.cssText
// supports (display: flex) {
// media screen and (min-width: 900px) {
// article { display: flex; }
// }
// }
// 由于这条规则内嵌其他规则
// 所以它有 cssRules 属性且该属性是 CSSRuleList 实例
rule0.cssRules instanceof CSSRuleList // true
var rule1 rule0.cssRules[0];
rule1.cssText
// media screen and (min-width: 900px) {
// article { display: flex; }
// }
var rule2 rule1.cssRules[0];
rule2.cssText
// article { display: flex; }
rule1.parentRule rule0 // true
rule2.parentRule rule1 // true
4CSSRule.type 属性返回一个整数值表示当前规则的类型。
最常见的类型有以下几种。
1普通样式规则CSSStyleRule 实例3import规则4media规则CSSMediaRule 实例5font-face规则
CSSStyleRule 接口
如果一条 CSS 规则是普通的样式规则不含特殊的 CSS 命令那么除了 CSSRule 接口它还部署了 CSSStyleRule 接口。
CSSStyleRule 接口有以下两个属性。
1CSSStyleRule.selectorText 属性返回当前规则的选择器。注意这个属性是可写的。
var stylesheet document.styleSheets[0];
stylesheet.cssRules[0].selectorText // .myClass
2CSSStyleRule.style 属性返回一个对象CSSStyleDeclaration 实例代表当前规则的样式声明也就是选择器后面的大括号里面的部分。
// style idmyStyle
// p { color: red; }
// /style
var styleSheet document.getElementById(myStyle).sheet;
styleSheet.cssRules[0].style instanceof CSSStyleDeclaration
// true
CSSStyleDeclaration 实例的cssText属性可以返回所有样式声明格式为字符串。
styleSheet.cssRules[0].style.cssText
// color: red;
styleSheet.cssRules[0].selectorText
// p
CSSMediaRule 接口
!TODO ... CSSStyleDeclaration 接口
CSSStyleDeclaration 接口可以直接读写 CSS 的样式属性不过连词号需要变成骆驼拼写法。
var divStyle document.querySelector(div).style;
divStyle.backgroundColor red;//写
divStyle.backgroundColor // red 读
上面代码中style属性的值是一个 CSSStyleDeclaration 实例。这个对象所包含的属性与 CSS 规则一一对应【一般属性带横线的要改成驼峰但是如果是保留字要前面加css 如float - cssFloat】
Element.style返回的只是行内样式并不是该元素的全部样式。通过样式表设置的样式或者从父元素继承的样式无法通过这个属性得到。元素的全部样式要通过window.getComputedStyle()得到
属性 (1) CSSStyleDeclaration.cssText属性用来读写当前规则的所有样式声明文本。
var divStyle document.querySelector(div).style;
divStyle.cssText background-color: red; border: 1px solid black; height: 100px; (2) CSSStyleDeclaration.length属性返回一个整数值表示当前规则包含多少条样式声明。
// HTML 代码如下
// div idmyDiv
// styleheight: 1px;width: 100%;background-color: #CA1;
// /div
document.getElementById(myDiv).style.length;// 3 (3) CSSStyleDeclaration.parentRule属性返回当前规则所属的那个样式块CSSRule 实例。如果不存在所属的样式块该属性返回null。 //TODO
实例方法 (1) CSSStyleDeclaration.getPropertyPriority() 方法接受 CSS 样式的属性名作为参数返回字符串表示有没有设置important优先级。如果有就返回important否则返回空字符串。
// HTML 代码为
// div idmyDiv stylemargin: 10px!important; color: red;/
var style document.getElementById(myDiv).style;
style.margin // 10px
style.getPropertyPriority(margin) // important
style.getPropertyPriority(color) // (2) CSSStyleDeclaration.getPropertyValue() 方法接受 CSS 样式属性名作为参数返回一个字符串表示该属性的属性值。
// HTML 代码为
// div idmyDiv stylemargin: 10px!important; color: red;/
var style document.getElementById(myDiv).style;
style.margin // 10px
style.getPropertyValue(margin) // 10px (3) CSSStyleDeclaration.item()方法接受一个整数值作为参数返回该位置的 CSS 属性名。
// HTML 代码为
// div idmyDiv stylecolor: red; background-color: white;/
var style document.getElementById(myDiv).style;
style.item(0) // color
style.item(1) // background-color (4) CSSStyleDeclaration.removeProperty() 方法接受一个属性名作为参数在 CSS 规则里面移除这个属性返回这个属性原来的值。
// HTML 代码为
// div idmyDiv stylecolor: red; background-color: white;
// 111
// /div
var style document.getElementById(myDiv).style;
style.removeProperty(color) // red
// HTML 代码变为
// div idmyDiv stylebackground-color: white; (5) CSSStyleDeclaration.setProperty() 方法用来设置新的 CSS 属性。该方法没有返回值。 该方法可以接受三个参数。
第一个参数属性名该参数是必需的。 第二个参数属性值该参数可选。如果省略则参数值默认为空字符串。第三个参数优先级该参数可选。如果设置唯一的合法值是important表示 CSS 规则里面的!important。 // HTML 代码为
// div idmyDiv stylecolor: red; background-color: white;
// 111
// /div
var style document.getElementById(myDiv).style;
style.setProperty(border, 1px solid blue);
检测浏览器是否支持某些css属性方法
function isPropertySupported(property) {if (property in document.body.style) return true;var prefixes [Moz, Webkit, O, ms, Khtml];var prefProperty property.charAt(0).toUpperCase() property.substr(1);for(var i 0; i prefixes.length; i){if((prefixes[i] prefProperty) in document.body.style) return true;}return false;
}
isPropertySupported(background-clip)
// true
