在不被注意的情况下用Javascript样式化元素

styling elements with Javascript without being noticed

本文关键字：Javascript 样式 元素 情况下      更新时间：2023-09-26

我有一个网页，其中有内容布局像1,2,3标记(也为no-js)而视觉我希望它是2,3,1.

我使用Javascript (jQuery)来交换他们的位置。但问题是，Javascript代码是在页面加载后执行的，因此可以明显地看到交换过程。

我现在能想到的唯一解决方案(也是一个糟糕的解决方案)是先隐藏整个身体，然后在交换完成时恢复身体。

$(function() {
    $("#div2, #div3").insertBefore("#div1");
    $("body").css({display: "block"});
});

<body style="display: none;">
...
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
...
<!-- in case JS is disabled, use css to restore -->
<!-- style should not be here, that's why I said it's a bad one. -->
<style type="text/css">
body {display: block !important;}
</style>
</body>
谁有更好的主意?

尝试在这三个元素之后立即执行JavaScript:

<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div> 
<script type="text/javascript"> $("#div2, #div3").insertBefore("#div1"); </script>

当然，这是对HTML的污染，但是，无论如何，这比隐藏整个body元素要好(在一些旧浏览器中页面会闪烁)。

相关文章：