原生js动态获取标签并增或改变属性实例
前言
li 结构图:



一、HTML

二、script
/*
*获取当前页面所有得li
*
*
*/
var lis = document.getElementsByTagName('li');
var list = document.getElementsByTagName('script');
var list2 = document.getElementsByTagName('link');
console.log(lis);
console.log(list);
console.log(list2);
/*
* 遍历获取得标签
* */
for (var i = 0; i < lis.length; i++) {
/*
* 赋予每一个li点击事件
* */
* lis[i].onclick = function () {
/*
* 赋予当前样式进行清空处理!
* 排除非当前点击li样式变化
* */
for (var j = 0; j < lis.length; j++) {
lis[j].style.color = '';
lis[j].className = '';
}
;
/*
* this当前得
* className -> class
* */
if (this.className = 'layui-this') {
/*当前得*/
}
/*
* 排他思想!赋值
* */
this.className = 'layui-this';
this.style.color = 'red';
}
}

篇外!
js生成标签
var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("href", "css/add.css");
document.body.appendChild(element);
总结
各位看官觉得不错得请三连!!!
本文通过实例讲解如何使用原生JavaScript动态获取HTML标签并进行增加或改变属性操作,包括HTML结构、JavaScript生成标签等内容。

1099

被折叠的 条评论
为什么被折叠?



