从localStorage中加载值后如何设置样式？
从localStorage中加载值后如何设置样式？
提问于 2021-08-17 20:20:39
我想从localStorage加载一个值，然后在页面加载时设置一个样式=‘display:none’或不在表行上。
我看到的一种可能性是：
<script>
if(localStorage.getItem('test') == 'aja')
{
document.write('<tr style="display:none">');
}else{
document.write('<tr>');
}
</script>但这似乎不是一个好的解决方案，因为编辑没有认识到这一点，然后又对丢失的内容进行了抱怨
我也可以在页面加载后隐藏它--但是在它隐藏之前的一瞬间它是可见的--这并不理想。
我有点错过了直接在html代码中使用变量的可能性。就像剃刀/ c#一样
@var hiddenOrNot = 'none';
<tr style="display:@hiddenOrNot">但这是在服务器端加载的，因此不可能获得localStorage值...
有什么建议吗？jquery或javascript
非常感谢
回答 2
Stack Overflow用户
发布于 2021-08-17 20:34:39
也许是这样的。
- 选择需要删除的行if condition true
- 创建包含样式的类要设置if condition true
的类
let tr = document.querySelector(".testRow");
let localStorageItem = localStorage.getItem("test") || "";
tr.classList.add((localStorageItem === 'aja') ? "hideRow" : null);.hideRow {
display: none
}<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr class="testRow">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
编辑:控制台上的错误是由于StackOverFlow不允许访问localStorage，应该可以在您的系统上正常工作
Stack Overflow用户
发布于 2021-08-18 07:39:33
您可以尝试在默认情况下将tr设置为display: none，如果localStorage.getItem('test') != 'aja' remove it.So在设置为hidden.Here之前的一瞬间不可见，这是一个演示：
查看：
<table>
<thead>
<tr class="hidden">
<td>Id</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr class="hidden">
<td>1</td>
<td>Name1</td>
</tr>
<tr class="hidden">
<td>2</td>
<td>Name2</td>
</tr>
</tbody>
</table>css：
<style>
.hidden {
display: none
}
</style>js：
<script>
$(document).ready(function () {
if (localStorage.getItem('test') != 'aja') {
$("tr").removeClass();
}
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68823561
复制相关文章
相似问题
腾讯云开发者
