我有一個 json 檔案，其中將我的資料存盤在樹中以生成某種圖表，我希望能夠根據 json 中的屬性有條件地更改圖表的顏色，當它為 false 時，顏色變為紅色，當它為 true 時它會變成綠色。這是我的json檔案
"children": [
{
"children": [
{
"children": [],
"id": 50,
"name": "gfj",
"checked": true
}
],
"id": 51,
"name": "malek"
},
{
"children": [
{
"children": [
{
"children": [],
"id": 49,
"name": "nice",
"checked": true
}
],
"id": 48,
"name": "amira",
"checked": false
}
],
"id": 47,
"name": "mahdi"
}
],
我能夠從我的 js 檔案中的 json 檔案中檢查屬性，但不知道如何更改顏色，因為 css 檔案中的顏色已更改
_checked = function(d){ return d.checked; },
這是 css 檔案：
/*
Example fishbone styling... note that you can't actually change
line markers here, which is annoying
*/
html, body{ margin: 0; padding: 0; overflow: hidden;}
/* get it? gill? */
*{ font-family: "serif", "serif"; }
.label-0{ font-size: 2em }
.label-1{ font-size: 1.5em; fill: #06405a; }
.label-2{ font-size: 1em; fill: #06405a; }
.label-3{ font-size: .9em; fill: #888; }
.label-4{ font-size: .8em; fill: #aaa; }
.link-0{ stroke: #188fc6; stroke-width: 3px}
.link-1{ stroke: #188fc6; stroke-width: 2px}
.link-2, .link-3, .link-4{ stroke: #188fc6; stroke-width: 2px; }
鏈接是圖中的箭頭，每個箭頭都有自己的顏色和大小，我的問題是如何使用在 js 檔案中檢查的屬性來動態更改 css 檔案中的顏色，非常感謝。
uj5u.com熱心網友回復：
我想你不能改變你的 css 檔案。但是，您可以通過執行類似于我在下面提出的方案的操作來獲得所需的行為。
關鍵是動態地改變你的風格，這取決于你的 json 中每個專案的“checked”屬性。為此，您可以使用，例如，Angular 指令 ngClass
CSS
istrueclass {
color:green;
}
isfalseclass {
color:red;
}
...
HTML
<div *ngFor="child1 of children">
<div *ngFor="child2 of child1">
<div *ngFor="lastChild of child2">
<span [ngClass]="{
'istrueclass': lastChild.checked,
'isfalseclass': lastChild.checked,
}">
{{ lastChild.name }}
</span>
</div>
</div>
uj5u.com熱心網友回復：
您可以根據從 json 檔案回傳的內容將類值動態設定為 html 元素。
例如：
Javascript檔案
//grab your html element
const htmlElement = document.getElementById('id_here');
if (_checked === true) {
htmlElement.removeClass('true_case')
htmlElement.addClass('false_case')
} else {
htmlElement.removeClass('true_case')
htmlElement.addClass('false_case')
}
并且accordinlgy 為這些類設定了css 樣式。
.true_case {
color: green;
}
.false_case {
color: red;
}
此解決方案可能會顯示一些錯誤 [此錯誤可以輕松解決] 但該方法是完全正確的，可以幫助您。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/360864.html
標籤：javascript html css json 有角的