如何在js树中同时显示颜色和删除线？
在JavaScript中，要在树结构中同时显示颜色和删除线，可以通过CSS样式来实现。以下是一个简单的示例，展示了如何在HTML和JavaScript中创建一个树结构，并应用颜色和删除线样式。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tree with Color and Strikethrough</title>
<style>
.tree-node {
margin-left: 20px;
}
.colored {
color: blue; /* 设置颜色 */
}
.strikethrough {
text-decoration: line-through; /* 添加删除线 */
}
</style>
</head>
<body>
<div id="tree"></div>
<script src="tree.js"></script>
</body>
</html>JavaScript部分（tree.js）
// 定义树节点数据结构
const treeData = {
name: 'Root',
children: [
{
name: 'Child 1',
children: [
{ name: 'Grandchild 1' },
{ name: 'Grandchild 2', attributes: { color: 'red', strikethrough: true } }
]
},
{
name: 'Child 2',
attributes: { color: 'green', strikethrough: true },
children: [
{ name: 'Grandchild 3' }
]
}
]
};
// 创建树的函数
function createTree(node, parentElement) {
const treeNode = document.createElement('div');
treeNode.className = 'tree-node';
// 创建标签并应用样式
const label = document.createElement('span');
label.textContent = node.name;
if (node.attributes) {
if (node.attributes.color) label.classList.add('colored');
if (node.attributes.strikethrough) label.classList.add('strikethrough');
}
treeNode.appendChild(label);
// 添加子节点
if (node.children) {
node.children.forEach(child => {
createTree(child, treeNode);
});
}
parentElement.appendChild(treeNode);
}
// 初始化树
const treeContainer = document.getElementById('tree');
createTree(treeData, treeContainer);解释
- HTML部分：定义了基本的页面结构和样式。
.colored类用于设置文本颜色，.strikethrough类用于添加删除线。 - JavaScript部分：
treeData是一个表示树结构的对象。createTree函数递归地创建树的每个节点，并根据节点的属性应用相应的CSS类。- 在主脚本中，通过调用
createTree函数并传入根节点和树容器元素来初始化树。
通过这种方式，你可以灵活地为树的每个节点设置颜色和删除线样式，从而满足不同的显示需求。
相关·内容
1回答
我在js树中同时显示颜色和删除线时遇到了问题。它只能显示js树中的颜色，如果js树文件夹名称未激活，则无法显示删除线。我已经设置了文件夹名称active是1，inactive是0。></textarea> 我在这里进行fs小提琴编
浏览 31提问于2020-04-24得票数 0
回答已采纳
1回答
我有一个问题，在js树中同时显示删除线和下划线。我的代码只能显示删除线，不能在js树中显示下划线。下面是我的js函数： var getStrike = function(status) {"status
浏览 46提问于2020-05-21得票数 0
回答已采纳
我正在使用Atlassian的源树通过git存储库调试回归问题。我的问题是如何从git中的图形线中识别出分支名称？我看到各种各样的颜色，如棕色、蓝色和红色。我的问题是，对应的颜色线的分支名是什么-
浏览 1提问于2016-01-13得票数 6
回答已采纳
我在spatstat中有一个等高线图，它是由一个点模式X的强度函数生成的(比如“树的位置”)。这个点模式中的每个x，y坐标都标有相应的第三个向量(如“树的直径”)。-->cf图片(当然可以省略代表树的垂直线)
我想用不同的颜色显示每个等高线级别的标记(直径)的平均值。有什么建议吗？谢谢!
浏览 3提问于2015-09-25得票数 0
我找不到任何关于如何在Google Maps JS v3中删除或更改赤道和国际日期变更线的颜色的信息。我一直在搜索文档和网络，寻找任何关于它们的控制因素。
浏览 0提问于2011-05-21得票数 9
回答已采纳
问题是，在顶部和底部窗口之间实际上没有可见的分隔器。我希望这个分隔符与垂直分隔器的颜色相同。。
EDIT2:我拆开了.vimrc文件并将问题隔离到了这些行中。
浏览 1提问于2014-07-23得票数 10
回答已采纳
2回答
First，我想为主情节添加一个颜色。import numpy as npimport seaborn as sns
sns.set_context
浏览 1提问于2015-11-03得票数 0
我使用NVD3.js multiChart在图表中显示多行和多条。一切正常工作，但x轴标签只对齐线点，而不是条形线。我想要正确地对齐标签直接在酒吧下面的，因为它应该。但我明白了：如您所见，-x轴(例如，2014-Feb)与条形图不对齐。2)对于NVD3.js或如何正确集成，我需要这个解决方案。
浏览 0提问于2014-07-17得票数 6
回答已采纳
中列出的所有示例都为点和回归线显示相同的颜色。更改color参数会同时更改这两个参数。如何为点设置不同的颜色作为线？
浏览 1提问于2018-01-08得票数 25
回答已采纳
在Easel.js中，您可以画一条这样的线： .moveTo(x1,y1) .beginStroke("blackmoveTo(newX1,newY1) .beginStroke("black")如何保持其他属性，如笔画颜色，同时改变线的坐标。我在给移动的物体划
浏览 11提问于2014-04-30得票数 0
回答已采纳
1回答
Vis.js组背景造型
、、、
我在一个Vis.js项目中有一个Angular5时间线，每个项目有三个组和多个项目/事件。gray-lighter; background-color: $gray-lighter;但是，在颜色为灰色的组中，垂直背景网格线不再可见。就好像组背景颜色是分层在网格线之上的。如果将z-index: 1;添加到.vis-vertical或.v
浏览 0提问于2018-08-03得票数 3
回答已采纳
1回答
我试图弄清楚如何在R中的传奇中添加点和线(颜色)。explain what I want因此，正如您所看到的，我希望能够在图例中同时拥有点和线(具有正确的类型和颜色</e
浏览 2提问于2013-07-24得票数 1
回答已采纳
1回答
我正在为西门子PLC开发一个网页，用于显示生产线上可能出现的“交通堵塞”。我的计划是将生产线的.jpg图像插入到网页中，然后在生产线的每台机器上放置红色的圆圈。然后我会用javascript和jquery改变颜色。 heigh
浏览 0提问于2018-04-11得票数 0
回答已采纳
1回答
配置Webpack以手动添加文件
、、、、
关于jquery和webpack的简单问题，import "./jquery";我的webpack.config入口线所以文件树是：./s
浏览 6提问于2017-12-15得票数 0
回答已采纳
3回答
这可能是一个基本的问题，但如何在Javascript中创建一条水平线(也称为水平线)，类似于html <hr>标签？我希望能够设置它的颜色和厚度，就像<hr>标签所允许的那样。我有一个网站，我需要在<script>标记(以及一些附带的代码)中执行此操作。我不能使用<hr>，因为我的一些用户没有启用JS；所以对于他们来说，不会显示任何<script>标记内容，但<hr&g
浏览 2提问于2016-09-25得票数 4
为此，我记录了提交ID，并将其与最近的HEAD进行比较，以生成git存储库中的更改列表。例如：这给出了一个git存储库中的修改列表。如何在git存储库中获得正确的删除列表？(因为，如果它可以列出已删除的目录，则可以理解为已删除其中的所有文件。因此，将不
浏览 2提问于2009-08-31得票数 4
如何删除操作栏和主屏幕之间的线或分隔符？如何在android中更改这个分隔符的颜色？提前谢谢。
浏览 12提问于2014-03-22得票数 6
回答已采纳
问题:如果我将带有Subversion工作副本的文件夹重命名/移动到文件系统中的另一个位置，svn将抱怨它“不再是一个工作副本”。一个人必须做干净的检查才能解决这个问题。
浏览 3提问于2010-01-14得票数 4
1回答
我是D3js的新手。我在可折叠的树中显示json。树显示得很好，但连接节点的线大部分都是直的。如何控制连接节点的圆弧半径？请让我知道如何在d3js中做到这一点。"car_number": "8080" }] }]连接在工作柱塞连杆中</e
浏览 15提问于2016-09-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
