Как раскрасить узел дерева в javascript

Question

У меня есть древовидная структура и текстовое поле, которое позволяет пользователю искать узлы внутри древовидной структуры.

Я уже написал функцию JS, которая определяет, существует ли узел в виде дерева.
я хочу покрасить узел, который искал пользователь. как я могу это сделать ??

Answer 1

Используйте CSS и измените имя класса в Javascript. Так что скажите, что ваши узлы - это div. Когда вы находите узел в Javascript, вы делаете что-то вроде:

divFoundNode.className = "selected";

Затем убедитесь, что ваш CSS имеет выбранный класс с установленным цветом фона. Это будет выглядеть примерно так:

.selected {background-color:red;} /* whatever your selected color is here */

Если вы не хотите использовать CSS, вы можете изменить цвет узла напрямую, выполнив что-то вроде этого:

divFoundNode.style.backgroundColor = "red";

Теперь вам, вероятно, также потребуется отключить выбор любого другого узла, который был выбран ранее. Для этого у вас есть несколько вариантов. Вы можете пройти через все узлы и удалить цвет перед установкой выбранного (как выше), или вы можете сохранить переменную в своем Javascript с последним выбранным div и просто нацелиться на него. Итак, вы бы сделали что-то вроде этого:

var divLastFoundNode; //global variable

function treeView_SelectNode(divFoundNode)
{
     divLastFoundNode.className = "";
     divFoundNode.className = "selected";
     divLastFoundNode = divFoundNode;
}

JQuery сделает это немного проще. Вы можете выбрать множество узлов и выполнить операции на всех из них одновременно. Например:

$("div.node").removeClass("selected");
$(divFoundNode).addClass("selected");

Answer 2

Трудно сказать без кода, но как насчет этого?

document.getElementById("foundnodeid").style.color="#abcdef";

Несмотря на то, что я предпочел бы изменить класс, а не цвет, но это зависит от вас:

document.getElementById("foundnodeid").style.class="classwithdifferentcolor";