JS DOM基础 操作属性、类、CSS样式
2021-05-06 14:30
标签:ted contain set height 语法 尺寸 nta rem ogg 语法:elementNode.attributeName ( 元素节点.属性名) 特别的,有些属性名称与js关键字或者保留字冲突了,只能用另外的名字: 自定义属性:给html标签写一个自己定义的属性。 虽然给一个对象添加属性很简单,但是在dom中,给元素节点添加自定义的属性节点,html5中要求自定义属性节点应该为‘data-’开头, 比如自定义属性abc,应该写成: data-abc 注意:attribute相关方法可以操作任意属性,包括自定义属性(对自定义属性使用时必须加‘data-’) Lorem ipsum dolor sit amet. classList相关方法: element.style.styleName; 学习html,css时要求少用行内样式,就是为了留给js用的,所以,js中操作css,多数情况下是使用该方式。 element.style.cssText 直接获取(/修改)行内样式的整个字符串值 注:基本都适用此种方式。 样式表(包括内联和外联): 注:基本不用这种方式。 由于兼容性问题,最终样式有两种写法: ELement.clientWidth ELement.offsetLeft JS DOM基础 操作属性、类、CSS样式 标签:ted contain set height 语法 尺寸 nta rem ogg 原文地址:https://www.cnblogs.com/jiayouba/p/11925617.html操作属性和类
一、属性节点操作
文本节点内容的获取和修改:
也可以使用“[ ]” ( 元素节点[属性名])
注意:一般我们操作属性节点时是不需要获取属性节点的,而是直接通过元素节点获取(/修改)属性节点的值。
class属性:要写成className(class是关键字)。
label标签的for属性:写成htmlFor。
通过方法操作属性节点:
element.getAttribute(attributeName) 返回元素节点的指定属性值
element.setAttribute(attributeName, attributeValue) 指定属性设置或更改为指定值
element.removeAttribute(attributeName) 从元素中移除指定属性
ement.hasAttribute(attributeName) 如果元素拥有指定属性,则返回true二、自定义属性
这样,要使用时就通过dataset属性即可操作了:
例如:a标签有自定义属性‘abc’
三、html5中class属性的新操作
使用classList获取一个元素节点上所有的class值:
element.classList.add(className) 添加一个指定名字的class值
element.classList.remove(className) 删除一个指定名字的class值
element.classList.contains(className) 判断一个指定名字的class值
element.classList.toggle(className) 切换一个指定名字的class值,有则删除,无则添加操作样式
所有的样式都是字符串。
一、行内样式
单个样式:
例子:divEle.style.width=‘200px’;
element.style.[styleName];
例子:divEle.style[‘width‘]=‘200px’;
注意:样式名称中的‘-’去掉,换成驼峰命名。 多个样式:
例子: box.style.cssText = "height: 100px; background-color: red;";
二、样式表样式
document.styleSheets[0].rules[0].style.backgroundColor = "blue";
styleSheets:样式表数组(一个style标签为一个样式表);
rules:所有规则数组(一个“{}”为一条规则);
所以含义是:第0个样式表中第0条规则中的backgroundColor修改为“blue”。
三、最终样式
低版本ie中,用属性currentStyle:
element.currentStyle.styleName ;
火狐和chrome中(现代浏览器),用方法getComputedStyle:
getComputedStyle (Element) .styleName ;
注意:根据需要会使用,但最终样式都是计算出来的样式,为只读的,不可修改。
兼容性封装:function getStyle(obj, name) {
if (obj.currentStyle) {//ie浏览器使用currentStyle[name]
return obj.currentStyle[name];
} else {//火狐和chrome浏览器使用getComputedStyle(obj,false)[name]
return getComputedStyle(obj, false)[name];
}
}
补充:获取元素节点的尺寸和位置
尺寸:
ELement.clientHeight 内容 + 内边距(填充盒)
ELement.offsetWidth
ELement.offsetHeight 内容 + 内边距 + 边框(边框盒) 位置:
ELement.offsetTop 边框盒的位置,位置以第一个定位的父级元素为基准
上一篇:JS---案例:滚动条