景洪服装网站建设,邯郸百度网站建设,开发一个安卓app,做电玩城设计的网站脚本化CSS就是使用JavaScript脚本操作CSS#xff0c;配合HTML5、Ajax、jQuery等技术#xff0c;可以设计出细腻、逼真的页面特效和交互行为#xff0c;提升用户体验#xff0c;如网页对象的显示/隐藏、定位、变形、运动等动态样式。
1、CSS脚本化基础
CSS样式有两种形式配合HTML5、Ajax、jQuery等技术可以设计出细腻、逼真的页面特效和交互行为提升用户体验如网页对象的显示/隐藏、定位、变形、运动等动态样式。
1、CSS脚本化基础
CSS样式有两种形式样式属性和样式表。DOM 2级规范提供了一套API其中包括CSS样式表访问接口。在DOM 2级规范之前允许使用标签对象的style属性访问行内样式属性。
1.1、访问行内样式
任何支持style特性的HTML标签在JavaScript中都有一个对应的style脚本属性。style是一个可读可写的对象包含了一组CSS样式。
使用style的cssText属性可以返回行内样式的字符串表示。同时style对象还包含一组与CSS样式属性一一映射的脚本属性。这些脚本属性的名称与CSS样式属性的名称对应。在JavaScript中由于连字符是减号运算符含有连字符的样式属性如font-family其脚本属性会以驼峰命名法重新命名如fontFamily。
【示例】border-right-color属性在脚本中应该使用borderRightColor div idbox 盒子/divscriptvar box document.getElementById(box);box.style.borderRightColor red;box.style.borderRightStyle solid;/script提示使用CSS脚本属性时需要注意几个问题
float是JavaScript保留字因此使用cssFloat表示与之对应的脚本属性的名称。在JavaScript中所有CSS属性值都是字符串必须加上引号。 elementNode.style.fontFamily Arial, Helvetica, sans-serif; elementNode.style.cssFloat left; elementNode.style.color #ff0000;CSS样式声明结尾的分号不能够作为脚本属性值的一部分。属性值和单位必须完整地传递给CSS脚本属性省略单位则所设置的脚本样式无效。
1.2、使用style对象
DOM 2级样式规范为style对象定义了一些属性简单说明如下
cssText返回style的CSS样式字符串。length返回style的声明CSS样式的数量。parentRule返回style所属的CSSRule对象。getPropertyCSSValue()返回包含指定属性的CSSValue对象。getPropertyPriority()返回包含指定属性是否附加了!important命令。item()返回指定下标位置的CSS属性的名称。getPropertyValue()返回指定属性的字符串值。removeProperty()从样式中删除给定属性。setProperty()为指定属性设置值也可以附加优先权标志。
1.3、使用styleSheets对象
在DOM 2级样式规范中使用styleSheets对象可以访问页面中所有样式表包括用style标签定义的内部样式表以及用link标签或import命令导入的外部样式表。
cssRules对象包含指定样式表中所有的规则样式。
提示IE支持rules对象表示样式表中的规则可以使用下面代码兼容不同浏览器 var cssRules document.styleSheets[0].cssRules || document.styleSheets[0].rules;在上面代码中先判断浏览器是否支持cssRules对象如果支持则使用cssRules非IE浏览器否则使用rulesIE浏览器。
【示例】通过 style typetext/css#box {width: 400px;height: 200px;background-color:#BFFB8F;border: solid 1px blue;}/stylescriptwindow.onload function(){var box document.getElementById(box);var cssRules document.styleSheets[0].cssRules || document.styleSheets[0].rules;//判断浏览器类型box.innerHTML h3盒子样式/h3box.innerHTML br边框 cssRules[0].style.border; //cssRules的border属性box.innerHTML br背景 cssRules[0].style.backgroundColor;box.innerHTML br高度 cssRules[0].style.height;box.innerHTML br宽度 cssRules[0].style.width;}/scriptdiv idbox/div提示cssRules或rules的style对象在访问CSS属性时使用的是CSS脚本属性名因此所有属性名称中不能使用连字符。例如 cssRules[0].style.backgroundColor;1.4、使用selectorText对象
使用selectorText对象可以获取样式的选择器字符串表示。
【示例】使用selectorText属性获取第1个样式表(styleSheets[0])中的第3个样式(cssRules[2])的选择器名称输出显示为“.blue” style typetext/css#box { color:green; }.red { color:red; }.blue { color:blue; }/stylelink hrefstyle1.css relstylesheet typetext/css mediaall /scriptwindow.onload function(){var cssRules document.styleSheets[0].cssRules || document.styleSheets[0].rules;var box document.getElementById(box);box.innerHTML 第一个样式表中第三个样式选择符 cssRules[2].selectorText;}/scriptdiv idbox/div1.5、编辑样式
cssRules的style不仅可以读取还可以写入属性值。
【示例】下面示例样式表中包含3个样式其中蓝色样式类(.blue)定义字体显示为蓝色。用脚本修改该样式类.blue规则字体颜色为浅灰色(#999) style typetext/css#box { color:green; }.red { color:red; }.blue { color:blue; }/stylescriptwindow.onload function(){var cssRules document.styleSheets[0].cssRules || document.styleSheets[0].rules;cssRules[2].style.color#999; //修改样式表中指定属性的值}/scriptp classblue原为蓝色字体现在显示为浅灰色。/p提示上述方法修改样式表中的类样式会影响其他对象或其他文档对当前样式表的引用因此在使用时请务必谨慎。 1.6、添加样式
使用addRule()方法可以为样式表增加一个样式具体用法如下 styleSheet.addRule(selector,style ,[index])styleSheet表示样式表引用参数说明如下
selector表示样式选择符以字符串的形式传递。style表示具体的声明以字符串的形式传递。index表示一个索引号即添加样式在样式表中的索引位置默认为-1表示位于样式表的末尾该参数可以不设置。Firefox支持使用insertRule()方法添加样式用法如下 styleSheet.insertRule(rule ,[index])
参数说明如下
rule表示一个完整的样式字符串index与addRule()方法中的index参数作用相同但默认为0放置在样式表的末尾。
【示例】先在文档中定义一个内部样式表然后使用styleSheets集合获取当前样式表利用数组默认属性length获取样式表中包含的样式个数。最后在脚本中使用addRule()或insertRule()方法增加一个新样式样式选择符为p样式声明背景色为红色字体颜色为白色段落内部补白为1个字体大小 style typetext/css#box { color:green; }.red { color:red; }.blue { color:blue; }/stylescriptwindow.onload function(){var styleSheets document.styleSheets[0]; //获取样式表引用var index styleSheets.length; //获取样式表中包含样式的个数if(styleSheets.insertRule){ //判断浏览器是否支持insertRule()方法//在内部样式表中增加p标签选择符的样式插入样式表的末尾styleSheets.insertRule(p{background-color:red;color:#fff;padding:1em;}, index);}else{ //如果浏览器不支持insertRule()方法styleSheets.addRule(P, background-color:red;color:#fff;padding:1em;, index);}}/scriptp在样式表中增加样式操作/p1.7、读取渲染样式
CSS样式具有重叠特性因此定义的样式与最终显示的样式并非完全相同。DOM定义了一个方法帮助用户快速检测当前对象的显示样式不过IE和标准DOM之间实现的方法不同。
1.IE浏览器
IE使用currentStyle对象读取元素的最终显示样式该对象为一个只读对象包含元素的style属性以及浏览器预定义的默认style属性。
2.非IE浏览器
DOM使用getComputedStyle()方法获取目标对象的显示样式但是它属于document.defaultView对象。getComputedStyle()方法包含了两个参数第一个参数表示元素用来获取样式的对象第二个参数表示伪类字符串定义显示位置一般可以省略或者设置为null。
【示例】使用if语句判断当前浏览器是否支持document.defaultView如果支持则进一步判断是否支持document.defaultView.getComputedStyle如果支持则使用getComputedStyle()方法读取最终显示样式否则判断当前浏览器是否支持currentStyle如果支持则使用它读取最终显示样式 style typetext/css#box { color:green; }.red { color:red; }.blue {color:blue; background-color:#FFFFFF;}/stylescriptwindow.onload function(){var styleSheets document.styleSheets[0]; //获取样式表引用指针var index styleSheets.length; //获取样式表中包含样式的个数if(styleSheets.insertRule){ //判断浏览器是否支持styleSheets.insertRule(p{background-color:red;color:#fff;padding:1em;}, index);}else{styleSheets.addRule(P, background-color:red;color:#fff;padding:1em;, index);}var p document.getElementsByTagName(p)[0];if( document.defaultView document.defaultView.getComputedStyle)p.innerHTML 背景色document.defaultView.getComputedStyle(p,null).backgroundColorbr字体颜色document.
defaultView.getComputedStyle(p,null).color;else if( p.currentStyle)p.innerHTML 背景色p.currentStyle.backgroundColorbr字体颜色p.currentStyle.color;else p.innerHTML 当前浏览器无法获取最终显示样式;}/scriptp classblue在样式表中增加样式操作/p1.8、读取媒体查询
使用window.matchMedia()方法可以访问CSS的Media Query语句。window.matchMedia()方法接收一个mediaQuery语句的字符串作为参数返回一个MediaQueryList对象。该对象有以下两个属性
media返回所查询的mediaQuery语句字符串。matches返回一个布尔值表示当前环境是否匹配查询语句。 var result window.matchMedia((min-width: 600px));result.media //(min-width: 600px)result.matches //true【示例1】根据mediaQuery是否匹配当前环境执行不同的JavaScript代码 var result window.matchMedia((max-width: 700px));if (result.matches) {console.log(页面宽度小于等于700px);} else {console.log(页面宽度大于700px);}【示例2】根据mediaQuery是否匹配当前环境加载相应的CSS样式表 var result window.matchMedia((max-width: 700px));if (result.matches){var linkElm document.createElement(link);linkElm.setAttribute(rel, stylesheet);linkElm.setAttribute(type, text/css);linkElm.setAttribute(href, small.css);document.head.appendChild(linkElm);}注意如果window.matchMedia无法解析mediaQuery参数应该返回false而不是报错。例如 window.matchMedia(bad string).matches //falsewindow.matchMedia方法返回的MediaQueryList对象有两个方法用来监听事件addListener方法和removeListener方法。如果mediaQuery查询结果发生变化就调用指定回调函数。例如 var mql window.matchMedia((max-width: 700px));//指定回调函数mql.addListener(mqCallback);//撤销回调函数mql.removeListener(mqCallback);function mqCallback(mql) {if (mql.matches) {//宽度小于等于700px} else {//宽度大于700px}}上面代码中回调函数的参数是MediaQueryList对象。回调函数的调用可能存在两种情况一种是显示宽度从700px以上变为以下另一种是从700px以下变为以上所以在回调函数内部要判断一下当前的屏幕宽度。
2、实战
2.1、获取元素尺寸
使用offsetWidth和offsetHeight属性可以获取元素的尺寸其中offsetWidth表示元素在页面中所占据的总宽度offsetHeight表示元素在页面中所占据的总高度。
【示例】使用offsetWidth和offsetHeight属性获取元素大小。 div styleheight:200px;width:200px;div styleheight:50%;width:50%;div styleheight:50%;width:50%;div styleheight:50%;width:50%;div iddiv styleheight:50%;width:50%;border-style:solid;/div/div/div/div/divscriptvar div document.getElementById(div);var w div.offsetWidth; //返回元素的总宽度var h div.offsetHeight; //返回元素的总高度/script提示上面示例在怪异模式下和标准模式的浏览器中解析结果差异很大其中怪异模式解析返回宽度为21px高度为21px而在标准模式的浏览器中返回高度和宽度都为19px。
注意offsetWidth和offsetHeight是获取元素尺寸的最好方法但是当元素隐藏显示时即设置样式属性display的值为none时则offsetWidth和offsetHeight属性返回值都为0。
