angular指令操作dom节点修改样式属性等-爱代码爱编程
在父节点不能直接取得时,通过确定的孙孙子节点不断查找父节点来改变一些样式
<a appChangeZIndex>加入指令的节点</a>
//以下为指令里的代码:
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[appChangeZIndex]'
})
export class ChangeZIndexDirective {
constructor(
private el: ElementRef,
private render: Renderer2
) {
}
@HostListener('click', ['$event']) onClick(event: MouseEvent) {
this.changeOtherZIndex();
this.changeCurrentZIndex();
}
private changeCurrentZIndex() {
let currentNode = this.el.nativeElement;
let parentNode = { className: 'a' };
while (parentNode.className !== 'datatable-row-right datatable-row-group') {
parentNode = this.render.parentNode(currentNode);
currentNode = parentNode;
}
currentNode.style.zIndex = '10';
}
private changeOtherZIndex() {
let currentNode = this.el.nativeElement;
let parentNode = { className: 'a' };
while (parentNode.className !== 'datatable-scroll') {
parentNode = this.render.parentNode(currentNode);
currentNode = parentNode;
}
parentNode['childNodes'].forEach((item: Node) => {
if (item.nodeType === 1) {
item['childNodes'].forEach((element: Node) => {
if (item.nodeType === 1) {
element['childNodes'].forEach((node: any) => {
if (node.className === 'datatable-row-right datatable-row-group') {
node.style.zIndex = '9';
}
});
}
});
}
});
}
}
注:
Renderer2 用来查找父节点
ElementRef 可以取得当前节点
HostListener(‘click’, [’$event’]) onClick(event: MouseEvent) 打印该event可以得知该节点下的内容
可以根据这个event里的东西得知node节点的属性
另:
原生dom修改方式如下
const cells = document.getElementsByClassName('datatable-row-right datatable-row-group');
for (let i = 0, len = cells.length; i < len; i++) {
console.changeZIndexlog('ddd', cells[i]['style'].transform);
const transform = cells[i]['style'].transform;
if (transform) {
cells[i]['style'].transform = null;
cells[i]['style'].position = 'fixed';
cells[i]['style'].right = '0';
}
cells[i].setAttribute('style', 'transform: null');
}
```
优化上边的指令代码
```ts
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[appChangeDropdownZIndex]'
})
export class ChangeDropdownZIndexDirective {
constructor(
private el: ElementRef,
private render: Renderer2
) {
}
@HostListener('click', ['$event']) onClick(event: MouseEvent) {
console.log('event', event);
this.changeOtherRowsZIndex();
this.changeCurrentRowZIndex();
}
// 使得当前class为datatable-row-right datatable-row-group的节点的zIndex为10
private changeCurrentRowZIndex() {
let currentNode = this.el.nativeElement;
// 获取到该下拉框所在的class为datatable-row-right datatable-row-group的节点
while (!(currentNode.className === 'datatable-row-right datatable-row-group' && currentNode.nodeName === 'DIV')) {
currentNode = this.render.parentNode(currentNode);
// 避免currentNode不存在引发报错
if (!currentNode) {
break;
}
}
// 将该节点的z-index置为10
currentNode.style.zIndex = '10';
}
// 使得所有class为datatable-row-right datatable-row-group的节点的zIndex为9
private changeOtherRowsZIndex() {
let parentNode = this.el.nativeElement;
// 获取class为datatable-scroll的节点,
while (!(parentNode.className === 'datatable-scroll' && parentNode.nodeName === 'DATATABLE-SCROLLER')) {
parentNode = this.render.parentNode(parentNode);
// 避免parentNode不存在引发报错
if (!parentNode) {
break;
}
}
this.findChildNode(parentNode, 3);
}
findChildNode(parentNode: any, num: number) {
// nodeType为1是正常显示的节点,排除掉ngIf为false之类的没有子节点的情况
// num的值代表递归的层级,我们通过观察datatable-scroll下三层为我们想要的class为‘datatable-row-right datatable-row-group’节点
if (parentNode.nodeType === 1 && num > 0) {
num--;
parentNode['childNodes'].forEach((item: any) => {
if (item.className === 'datatable-row-right datatable-row-group' && item.nodeName === 'DIV') {
item.style.zIndex = '9';
} else {
this.findChildNode(item, num);
}
});
}
}
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/qq_32332433/article/details/110879897