DOM2级样式
来源:互联网 发布:驱老鼠超声波软件 编辑:程序博客网 时间:2024/06/05 05:40
一、常用方法
1.确定文档的归属窗口:
varparentWindow=document.defaultView||document.parentWindow//IE
2.用于确定当前节点具有什么能力(建议使用能力检测)
Document.body.isSupported();
Document.implementation.hasFeature();
接收两个参数:特性名和版本号
3.DOM3级引入两个辅助比较节点的方法(返回值为布尔值)
isSameNode():判断节点是否相同,两个是否引用同一个对象
isEqualNode():判断节点是否相等,两个是否具有相同的类型和相同的属性。
4.框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示:
属性contentDocument指向表示框架内容的文档对象。
IE8以前支持:contentWindow属性。
兼容写法:
var iframe=document.getElementById(‘myIframe’);
var iframeDoc=iframe.contentDocument||iframe.contentWindow.document
二、样式
1.判断浏览器是否支持DOM2级定义的CSS能力
var a=document.implementation.hasFeature(‘CSS’,’2.0’);
var b=document.implementation.hasFeature(‘CSS2’,’2.0’);
2.访问元素的样式
(1)obj.style.属性名(注意驼峰式写法)。
(2)特殊的属性:float 非IE:cssFloat ,IE:styleFloat
3. style对象的属性与方法
cssText : 访问style特性中的css 代码 读取模式和写入模式
length : css属性数量
item(index): 返回指定位置的css属性名称
getPropertyValue(propertyName): 返回属性值
removeProperty(属性名): 从样式中删除属性
setProperty(propertyName,value,priority): 将给定属性设置为相应的值,并加上优先权标志(’important’或一个空字符串)。
4.计算的样式(所有样式都是只读的,不能修改其属性)
非IE:document.defaultView.getComputedStyle(obj,null).属性名;
IE: obj.currentStyle.propertyName.propertyName;
5.操作样式表
(1).判断浏览器是否支持DOM2级样式表
document.implementation.hasFeature(‘StyleSheets’,’2.0’);
(2) CSSStyleSheet常用属性:
disabled: 表示样式表是否被禁用的布尔值
href:<link href=” ”> 中的URL
type: 表示样式表类型的字符串
cssRules :样式表中包含样式规则的集合,IE:rules
(3) 获取样式表
1. document.styleSheets集合:表示应用于文档的所有样式表.
2. obj.sheet || obj.styleSheet //obj可以是<link>/<style>元素
(4)CSS规则
CSSRule对象表示样式表的每一条规则,继承CSSRule的CSSStyleRule对象包含以下属性(IE不支持):
1. cssText:返回整条规则对应的文本
2.selectorText:返回当前规则的选择符文本
3. style:
(5)创建规则
1.sheet.insertRule(“body{ background:red }”, 0);//DOM方法
注:两个参数:规则文本和插入位置的索引
2.sheet.addRule(“body”,”background:red”,0);//IE8以前
注:三个参数:选择符文本,css样式信息,插入规则的位置(可选)
3.跨浏览器写法:
functioninsertRule(sheet,selectorText,cssText,position){
if(sheet.insertRule){
sheet.insertRule(selectorText +“{”+cssText+”}”,position);
}else{
sheet.addRule(selectorText,cssText,position);
}
}
(6)元素大小(不属于DOM2,IE引入的属性,所有浏览器都支持)
1.偏移量
offsetHeight:包括元素高度,可见滚动条和边框高度
offsetWidth:同上
offsetLeft:左外边框到包含元素左内边框的距离
offsetTop:上外边框到包含元素上内边框的距离
offsetParent:保存着包含元素
要想知道某个元素的偏移量,要将offsetLeft和offsetTop与其offsetParent的相同属性相加,如此循环直至根元素
两个函数:
function getElementLeft(element){
var actualLeft=element.offsetLeft; //获取当前元素的偏移量
var current=element.offsetParent; //获取包含元素
while(current!==null){
actualLeft +=current.offsetLeft; //累加包含元素
current=current.offsetParent; //重新计算包含元素
}
return actualLeft;
}
function getElementTop(element){
….
}
2.客户区大小
clientWidth和clientHeight :元素内容及其内边距所占据的空间大小
document.documentElement.clientWidth||document.body.clientWidth(IE7之前)
3.滚动大小
scrollHeight:在没有滚动条时,元素内容的高度
scrollWidth: …
scrollTop:…
scrollLeft:被隐藏在内容区域左侧的像素
兼容:document.documentElement/document.body
确定文档总高度(取scrollHeight/clientHeight的最大值):
Max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
4.确定元素大小
方法:getBoundingClientRect();返回一个矩形对象
注意:IE8以前左上角坐标为(2,2),其他浏览器为(0.,0)
函数:
function getRect(element){ var scrollTop=document.documentElement.scrollTop;var scrollLeft=document.documentElement.scrollLeft; if(element.getBoundingClientRect){ if(typeof arguments.callee.offset!="number"){ var temp=document.createElement("div"); temp.style.cssText="position:absolute;top:0;left:0"; document.body.appendChild(temp); arguments.callee.offset=-temp.getBoundingClientRect().top-scrollTop; document.body.removeChild(temp); temp=null; } var rect=element.getBoundingClientRect(); var offset=arguments.callee.offset; return{ left:rect.left+offset,right:rect.right+offset,top:rect.top+offset,bottom:rect.bottom+offset }; }else{ var actualLeft=getElementLeft(element); var actualTop=getElementTop(element); return{ left:actualLeft-scrollLeft;right:actualLeft+element.offsetWidth-scrollLeft;top:actualTop-scrollTop;bottom:actualTop+element.offsetHeight-scrollTop; } } alert(getRect(document.getElementById("box")).left);
- DOM2级样式style
- DOM2级样式
- W3C DOM2样式规范
- 样式属性即操作在DOM2级中的变化
- Dom2(页面加载事件,标签样式,刷新)
- 第十二章:DOM2 和 DOM3(样式)
- dom2
- DOM2
- DOM2
- DOM2
- DOM2
- DOM1级问题与DOM2级事件
- DOM2级遍历和范围----NodeIterator
- DOM2级遍历和范围----TreeWalker
- 【红宝书笔记】DOM2级事件小相关
- JavaScript DOM0、DOM2级事件简述
- DOM2级事件绑定的兼容处理
- JavaScript高级程序设计之DOM2和DOM3之样式之元素大小第12.2.3讲
- CSRF攻击与防御策略
- 对象的复制,提升整洁度
- 进制转换2
- 如何把本地项目上传至git,指令步骤
- 基本二维树状数组
- DOM2级样式
- Android混淆那些事,看这篇就够了
- MySQL 批量插入 Update时Replace
- new 和 delete 到底是什么?
- SPOJ
- nodejs 调试
- java项目中如何判断是在liunx系统或者是在windows系统中
- 直接内存
- Java多线程JUC