DOM的款式操纵

2023年2月26日 110次阅读 来源: 庄国琳
  • getAttribute()要领

返回的是内联款式的声明内容

//元素.getAttribute(属性称号);
var btn=element.getAttribute('style');
  • style属性

DOM中HTMLElement对象供应了style属性
1.返回CSSStyleDeclaration对象
2.DOM中对应CSS中一切款式属性供应的对象(封装了一切款式属性)
3.获得款式属性对应的值，字符串范例(将其转换为Number范例)

//用style属性猎取
//猎取页面div的id属性值为d1的元素
var div=document.getElementById('d1');
//直接运用style属性猎取内联款式
var style=div.style;
  • 猎取内嵌与外联款式表

Document对象供应了styleSheets属性
猎取当前HTML页面中一切的款式表
StyleSheetList对象(类数组对象)
type属性：示意当前运用的是CSS款式
href属性：示意当前款式的途径
cssRules/rules属性：示意当前款式表中一切的款式划定规矩
CSSRuleList对象：示意当前款式表中的一切划定规矩鸠合(类数组对象)
DOM中供应有关外联款式的猎取与设置

1.操纵比较复杂
2.操纵时轻易失足

实际情况：
1.页面团体款式作风转变，经由过程<link>元素的href属性的值得修正(修正引入的CSS文件)
2.页面部分款式作风转变，内联款式的优先级别高于外联款式的特性(经由过程内联款式掩盖外联款式)

//猎取内嵌款式表或外联款式表的步骤
var styleSheetList=document.styleSheets;
var styleSheet=styleSheetList[0];
var cssRuleList=styleSheet.reles;
var cssStyleRule=cssRuleList[0];
var styleDecl=cssStyleRule.style;
console.log(styleDecl.width);
  • class属性的操纵

DOM中某个对象供应了className属性，直接能够获得Class属性的值

//元素名.className
var className=div.className;
//classList属性(浏览器兼容问题)：猎取多个类选择器叠加的用法
//元素名.classList
var classList=div.classList;
  • 猎取有用款式

window对象的getComputedStyle(element)要领
1.猎取指定元素的当前有用款式内容
返回值：CSSStyleDeclaration对象
该要领仅用于猎取，不能用于设置

//window.getComputedStyle(元素名)
var style=window.getComputedStyle(div);
//getComputedStyle(element)要领具有浏览器兼容问题
//IE 8以下浏览器不支持，供应currentStyle属性
var style=div.currentStyle;
  • 猎取元素内部的宽度和高度

只能猎取，不能设置，局限是：内容区+内边距
clientWidth:猎取宽度
clientHeight:猎取高度

//元素名.clientWidth
console.log(div.clientWidth);
//元素名.clientHeight
console.log(div.clientHeight);
  • 猎取内容区的宽度和高度

scrollWidth:内容区的宽度
scrollHeight:内容区的高度

//元素名.scrollWidth
console.log(div.scrollWidth);
//元素名.scrollHeight
console.log(div.scrollHeight);
  • 猎取指定元素的定位父元素

1.假如当前元素的一切先人元素都没有开启定位的话，默以为<body>元素
2.假如当前的一切先人元素中，只能一个开启定位的话，默以为开启定位的先人元素
3.假如当前元素的一切先人元素中，具有多个开启定位的话，间隔当前元素近来的谁人先人元素

//元素名.offsetParent
console.log(d1.offsetParent);
    原文作者：庄国琳
    原文地址: https://segmentfault.com/a/1190000016252181
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞