DOM元素尺寸和位置

最新推荐文章于 2024-08-07 17:12:09 发布

shaonian1996

最新推荐文章于 2024-08-07 17:12:09 发布

阅读量651

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_41179401/article/details/79362824

版权

javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

DOM元素尺寸和位置

一获取元素大小

1 通过内联获取元素的大小

<body>
	<div id="box" style="width: 100px;height: 100px"></div>
</body>
	<script type="text/javascript">
		var box=document.getElementById('box');
		console.log(box.style.height);    //100px
		console.log(box.style.width);     //100px
	</script>
</html>

float的兼容性：

<body>
    <div id="box">
        1234
    </div>
    <script type="text/javascript">
        var box = document.getElementById('box');    
        typeof box.style.cssFloat!='undefined'?box.style.cssFloat = 'right':box.style.styleFloat = 'right';    
    </script>
</body>

复合属性用驼峰命名法：style.fontSize;style.zIndex;

添加class,移除class:

// 判断是否有要添加的class名
		function hasClass(element,className){
			return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
		}
		// 添加class
		function addClass(element,className){
			if(!hasClass(element,className)){
				return element.className += ' '+className;
			}
		}
		// 移除class
		function removeClass(element,className){
			if(hasClass(element,className)){
				element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'');
			}
		}
		addClass(box,'a');
		removeClass(box,'a');

2 获取计算后的元素大小(无论内联，行内，链接)只能获取不能设置

var style=window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle;

第二个是伪类例如：hover;没有则写成null

3 link或style标签内的元素大小

		document.getElementsByTagName('style')[0];  //第一个style标签 HTMLStyleElement
		document.getElementsByTagName('link')[0];   //第一个link标签  HTMLStyleElement
		var link = document.getElementsByTagName('style')[0]||document.getElementsByTagName('link')[0];
		var sheet = link.sheet||link.styleSheet;    //得到通用的CSSStyleSheet

W3C:                                                                  IE8-：
            样式表集合:sheet.cssRules;                                      样式表集合：sheet.rules;
            删除第一个样式:sheet.deleteRule(0);                              删除第一个样式:sheet.removeRule(0);
            在第一个位置添加一个样式:sheet.insertRule('body{color:red}',0)    在第一个位置添加一个样式:sheet.addRule('body','color:red',0)

跨浏览器添加和删除css规则：

// 跨浏览器添加css规则
		function insertRule(sheet,selectorText,cssText,position){
				// 如果是非IE
			if(sheet.insertRule){
				sheet.insertRule(selectorText+"{"+cssText+"}",position);
				// 如果是IE
			}else if(sheet.addRule){
				sheet.addRule(selectorText,cssText,position);
			}
		}
		// 跨浏览器删除css规则
		function deleteRule(sheet,index){
			// 如果是非IE
			if(sheet.deleteRule){
				sheet.deleteRule(index);
				// 如果是IE
			}else if(sheet.removeRule){
				sheet.removeRule(index);
			}
		}
		var sheet = document.styleSheets[0];     //IE 非IE通用
		insertRule(sheet,'body','color:red',0);  //添加一条css规则
		deleteRule(sheet,0);                     //删除一条css规则

总结：以上三种无法获取元素本身实际大小，比如加了内边距，滚动条，边框。且有单位px。

二获取元素实际大小（没有单位）

1 clientWidth和clientHeight

可以获取元素可视区的大小：得到元素内容及内边距所占据的空间大小（不算边框）,有滚动条要减去。

2 scrollWidth和scrollHeight

可以获取滚动内容的元素大小

3 offsetWidth和offsetHeight

获取元素实际大小;包括边框，内边距，滚动条

4 获取浏览器可视区大小

window.innerWidth和document.documentElement.clientWidth:狐火和其他浏览器

5 可以获取事件对象离浏览器的距离

window.οnclick=function(e){