sciter动态创建div使用display:none无法实时显示隐藏（九）

当你使用js动态创建div时，给元素设置display:none无法实时隐藏，必须失去焦点再获得焦点刷新画面帧才更新UI，这是因为sciter的状态更新机制问题，官网也给出了原因：https://sciter.com/displaynone-is-considered-harmful/

解决方案

定义一个css隐藏属性，通过给div添加/删除这个属性来控制隐藏显示

css中定义

[hidden] {
    display: none;
}

使用属性

给div添加属性就是隐藏

<!-- 下面的div将被隐藏 -->
<div id="myDiv" hidden></div>

js控制显示隐藏

// 显示它（移除 hidden 属性）
document.getElementById("myDiv").removeAttribute('hidden');

// 隐藏它（设置 hidden 属性）
document.getElementById("myDiv").setAttribute('hidden', '');

jquery 或者 zepto 控制显示隐藏

// 显示它
$("#myDiv").removeAttr('hidden');

// 隐藏它
$("#myDiv").attr('hidden', '');

原文出自：https://lingkang.top/archives/sciter-dtcjdivsydisplaynonewx