DOM的样式操作

Noodles 发布于2019-08-23 11:41 / 563人阅读

摘要：方法返回的是内联样式的声明内容元素属性名称属性中对象提供了属性返回对象中对应中所有样式属性提供的对象封装了所有样式属性得到样式属性对应的值，字符串类型将其转换为类型用属性获取获取页面的属性值为的元素直接使用属性获取内联样式获取内嵌与外联样式

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.页面整体样式风格改变，通过元素的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.如果当前元素的所有祖先元素都没有开启定位的话，默认为元素
2.如果当前的所有祖先元素中，只能一个开启定位的话，默认为开启定位的祖先元素
3.如果当前元素的所有祖先元素中，具有多个开启定位的话，距离当前元素最近的那个祖先元素

//元素名.offsetParent
console.log(d1.offsetParent);

云服务器 GPU云服务器 js dom样式修改 Dom操作 dom对象操作 DOM交互操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97325.html

jquery梳理之属性操作

摘要：与元素属性原生对于元素的属性有三种方法来操作为元素添加属性名和属性值获取元素属性值删除元素属性而则将以上三个操作简化为和对应对应对应上述的为属性名，为属性值对于需要设置多个属性时，采用的方式是在方法传入属性配置对象元素值属性三个方法都 attr与removeAttr - 元素属性 JS原生对于元素的属性有三种方法来操作 dom.setAttribute(name , value) //...

silencezwm 2019-08-21 16:41 评论0 收藏0
DOM操作成本到底高在哪儿？

摘要：刨根问底，这里说的成本，到底高在哪儿呢什么是文档对象模型什么是可能很多人第一反应就是等标签至少我是，但要知道，是，是，对象模型，是为提供的。操作具体的成本，说到底是造成浏览器回流和重绘，从而消耗资源。从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便...

yuxue 2019-08-22 15:51 评论0 收藏0
DOM操作成本到底高在哪儿？

摘要：刨根问底，这里说的成本，到底高在哪儿呢什么是文档对象模型什么是可能很多人第一反应就是等标签至少我是，但要知道，是，是，对象模型，是为提供的。操作具体的成本，说到底是造成浏览器回流和重绘，从而消耗资源。从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便...

MASAILA 2019-08-02 10:04 评论0 收藏0
jQuery基础(一) ：样式篇

摘要：如下就是对象或是如下以下两者的修改都是等价的但是使用不能很好的操作，所以可以将其转换成对象把元素转化成的对象总体，表示当前的上下文对象是一个对象，可以调用对象所拥有的属性和方法。代表的上下文对象是一个的上下文对象，可以调用的方法和属性值。一：初识 jquery： 1、 jQuery 只是一个库，不需要特别的安装，只需要我们在页面标签内中通过 script 标签脚本引入 jQuer...

SegmentFault 2019-08-20 10:35 评论0 收藏0
DOM扩展,DOM2和DOM3

摘要：扩展选择符的核心是两个方法和。目前已完全支持的浏览器有和。在写模式下，会根据指定的字符串创建新的子树，然后用这个子树完全替换调用元素。在删除带有事件处理程序或引用了其他对象子树时，就有可能导致内存占用问题。删除集合中指定位置的规则。 DOM扩展选择符API Selectors API Level 1 的核心是两个方法：querySelector()和querySelectorAll(...

suxier 2019-08-21 10:45 评论0 收藏0