树形结构点击高亮简单实现

最新推荐文章于 2023-11-27 11:30:27 发布

原创最新推荐文章于 2023-11-27 11:30:27 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

1、样式

这块我是修改根据自定义属性data-id 找到的节点修改里面div div 中span字体的颜色

    <style type="text/css">

    .custom-tree-item-clicked  div div span{
    	color:#FC9003;
    }

    </style>

2、js模块


var selectId =""; //定义全局变量 保存点击过后的树形节点
//点击事件中添加的方法

//根据自定义属性查找元素 
var  selectspan  = "div[data-id='"+data.data.id+"']";
var jsget    = document.querySelector(selectspan);
// 方法一： 移除样式 上一个选中的样式
//removeClass(selectId,"custom-tree-item-clicked");

//方法二:使用setAttribute
var classstrold =selectId.getAttribute("class");
var classstrnew  =classstrold.replace("custom-tree-item-clicked"," ");
selectId.setAttribute("class",classstrnew);

//改变为现在选中的
selectId=jsget;

//当前选中的添加样式
jsget.className = jsget.className  +"  custom-tree-item-clicked ";



//去除、class 样式 的 方法 可以用  document.getElementById("id").getAttribute("class").replace("类名"," ");
function removeClass(obj, cls){
	  var obj_class = ' '+obj.className+' ';//获取 class 内容, 并在首尾各加一个空格. ex) 'abc    bcd' -> ' abc    bcd '
	  obj_class = obj_class.replace(/(\s+)/gi, ' '),//将多余的空字符替换成一个空格. ex) ' abc    bcd ' -> ' abc bcd '
	  removed = obj_class.replace(' '+cls+' ', ' ');//在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
	  removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'
	  obj.className = removed;//替换原来的 class.
	}