ImageVerifierCode 换一换
格式:DOC , 页数:7 ,大小:46.50KB ,
资源ID:3179707      下载积分:20 文钱
快捷下载
登录下载
邮箱/手机:
温馨提示:
快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。 如填写123,账号就是123,密码也是123。
特别说明:
请自助下载,系统不会自动发送文件的哦; 如果您已付费,想二次下载,请登录后访问:我的下载记录
支付方式: 支付宝    微信支付   
验证码:   换一换

加入VIP,省得不是一点点
 

温馨提示:由于个人手机设置不同,如果发现不能下载,请复制以下地址【https://www.wenke99.com/d-3179707.html】到电脑端继续下载(重复下载不扣费)。

已注册用户请登录:
账号:
密码:
验证码:   换一换
  忘记密码?
三方登录: QQ登录   微博登录 

下载须知

1: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。
2: 试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。
3: 文件的所有权益归上传用户所有。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 本站仅提供交流平台,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

版权提示 | 免责声明

本文(JavaScript样式.doc)为本站会员(11****ws)主动上传,文客久久仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知文客久久(发送邮件至hr@wenke99.com或直接QQ联系客服),我们立即给予删除!

JavaScript样式.doc

1、样式修改元素外观方式修改元素外观主要有下面 3种方法:修改 ID,修改 className,修改元素的style属性修改 ID?会造成多么混乱的结果可想而知!修改 className确实是非常好的方法,我们甚至可以利用 CSS层叠,通过修改 body的 className来修改整个页面的风格!前提是我们必须写特定的CSS!/CSS 代码body.redStyle border:2px solid red;body.redStyle * color:red;body.blueStyle border:2px solid blue;body.blueStyle * color:blue;/JS 代

2、码document.body.className=“redStyle“;/切换为“红粉佳人”风格document.body.className=“blueStyle“;/切换为“蓝调情怀”风格但修改 className也并非那么容易,不要忘了 className可以有多个的!所以不管添加,测试还是移除元素的 className,都要小心,下面的函数可以造福人类!function hasClassName(obj,cn) return (new RegExp(“b“+cn+“b“).test(obj.className);function addClassName(obj,cn) return

3、obj.className += “ “ + cn;/第一次添加时,会多出一个前置空格/但不用担心,浏览会自动将其清除掉function delClassName(obj,cn) return obj.className = obj.className.replace(new RegExp(“b“+cn+“b“),“);/同样,多个 className 之间的多个空格也会被视为一个元素的 style属性?见下面Style属性可以在元素的 style属性上应用 CSS规则,并且 style属性上的规则优先级要高于样式表中的规则,因此,通过修改元素的 style属性来修改元素的外观可能是最方便并且

4、是最有效的方法了。同其它 HTML属性不同的是,元素的 style属性是一个对象,CSS 的属性名和属性值分别映射到了 style对象的属性名和属性值,如定义对象的style=“color:red;“,在 JavaScript中访问时就可以这样访问:obj.style.color。但 style属性也有一些需要注意的地方,比如 CSS属性名中包含一些不能用作变量名的非法字符时,在 JavaScript中访问时,会自动转换成驼峰命名式。var oDiv=document.getElementById(“oDiv“);alert(oDiv.style.fontSize);/自动驼峰命名/如果要直接

5、获取 style 属性中的所有 CSS 文本,则可以使用style 对象的 cssText 属性alert(oDiv.style.cssText);/对于 CSS 简写方式,各个浏览器返回结果出现分歧alert(oDiv.style.border);/需要分别获取值alert(oDiv.style.borderLeftColor);/但会很麻烦/对于颜色,火狐总返回 RGB 表现形式,但设置时可以使用十六进制形式alert(oDiv.style.backgroundColor);/火狐会返回 rgb(x,y,z)但是元素的 style属性仅仅提供了内联样式所定义的 CSS规则,而不能反映 CS

6、S样式表中的规则/CSS#oDiv color:blue;/HTMLDiv/JSalert(document.getElementById(“oDiv“).style.color);/空的另外,要注意的是,修改元素的 style属性时,必须将一个字符串赋给style对象的属性!oDiv.style.width = 120;/错误的,虽然在 IE 下有效果oDiv.style.fontSize=“120%“;/正确获取实际应用在元素上的样式对于获取元素的实际的 CSS层叠最后的样式,IE 与 W3C DOM存在分歧:IE给对象提供了一个 currentStyle属性,它的使用方式很像元素的 st

7、yle属性,但它返回的值是元素的实际样式,而不管样式是内联的还是在外部样式表中定义的! W3C DOM 则使用一个全局方法 getComputedStyle,它的第一个参数为要检测的对象,第二个参数为 null(在未来实现),将返回一个与元素的 style也很相似的对象,但一是返回的对象是元素实际样式规则,二是它对于数值型属性总是返回像素值alert(oDiv.currentStyle.width);/IE,currentStyle 保留原来定义在 CSS 中的单位alert(window.getComputedStyle(oDiv,null).width);/W3C DOM,并且总是返回计算

8、后的像素值/另外,两种方式都不能获取那些 CSS 简写方式定义的,下面两个都会输出空alert(oDiv.currentStyle.background);alert(getComputedStyle(oDiv,null).border);Cross-Browser 获取元素实际样式的方式function getStyle(obj,cn) if (window.getComputedStyle) /W3C DOMreturn window.getComputedStyle(obj,null)cn; else if (obj.currentStyle) /IEreturn obj.current

9、Stylecn;return “;样式表DOM也提供了访问外部样式表的方法,当然,也有无奈的兼容性问题!向页面添加样式表/使用添加节点的方法var lnk = document.createElement(“link“);lnk.type=“text/css“;lnk.rel=“styleSheet“;lnk.href=“test.css“;var head = document.getElementsByTagName(“head“)0;head.appendChild(lnk);/在 IE 下不能使用 innerHTML 向 head 中添加 HTML 代码的方式/另一种方法就是使用 do

10、cument.writedocument.write(“);访问样式表也许修改个别元素的样式是十分简单的,但更改某条样式表规则(可以使所有相关元素都发生变化),则十分麻烦,并且这种技术只有 Win平台上的 IE与火狐才支持!但是访问样式表中的 CSS规则仍然是有办法的!alert(document.styleSheets);/document 对象的 styleSheets属性是一个包含了所有的样式表的伪数组var sheets = docuemtn.styleSheets;alert(sheets.length);/length 报告了样式表的个数/style 标签出现一次或使用 link

11、标签链入 CSS 一次就算作一个样式表对象var sheet1 = sheets0;/可以使用下标来访问样式表对象的属性 type,一般都为 text/css href,link 标签为其 href属性,而 style标签则为空 id,所属标签的 ID disabled,样式表是否启用,启用时为 false cssText(仅 IE),样式表中规则的文本形式 owningElement(IE),ownerNode(W3C DOM),返回引入样式表的那个标签 rules(IE),cssRules(W3C),对应样式表里所有规则的集合 Rule对象属性 selectorText ,选择符 styl

12、e,与元素上的 style 属性十分相似,可以读取和设置 CSS规则 ,并且有 cssText属性 修改样式表通过 styleSheets访问到的样式表对象具有一些方法来修改其中的样式表规则,但这些方法在各个浏览器中不一样。火狐支持 W3C的 insertRule()和deleteRule()方法。IE 使用专有的 addRule()和 removeRule()方法。而其它浏览器则不支持任何一个。var sheet = document.styleSheets0;sheet.insertRule(“body color:blue;“,1);/W3C 方法,第一个参数为 CSS 文本 ,第二个参

13、数为位置, 从 0 开始计数sheet.addRule(“body“,“color:blue;“,1);/IE 方法,第一个参数为CSS 选择符 ,第二个为 CSS 内容,第三个为位置/而要删除某条规则,则只能通过下标sheet.removeRule(1);/IEsheet.deleteRule(1);/W3CCross-Browser 总结函数function addCSS(sheet,selectorText,declarations,index) if (sheet.insertRule) sheet.insertRule(selectorText+“ “+declarations+“,index); else if (sheet.addRule) sheet.addRule(selectorText,declarations,index);function delCSS(sheet,index) if (sheet.deleteRule) sheet.deleteRule(index); else sheet.removeRule(index);

Copyright © 2018-2021 Wenke99.com All rights reserved

工信部备案号浙ICP备20026746号-2  

公安局备案号:浙公网安备33038302330469号

本站为C2C交文档易平台,即用户上传的文档直接卖给下载用户,本站只是网络服务中间平台,所有原创文档下载所得归上传人所有,若您发现上传作品侵犯了您的权利,请立刻联系网站客服并提供证据,平台将在3个工作日内予以改正。