首页 \ 问答 \ 在DOMContentLoaded触发后应用样式？(Are styles applied after DOMContentLoaded is triggered?)

在DOMContentLoaded触发后应用样式？(Are styles applied after DOMContentLoaded is triggered?)

 考虑下面的HTML文档：  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: crimson;
        }

        div {
            transition: opacity 5s;
            font-size: 4em;
            opacity: 0;
        }

        .loaded div {
            opacity: 1;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('body').className += "loaded";
        })
    </script>
</head>
<body id="body">
<div>
TEST
</div>
</body>
</html>
 
 该div应该将其不透明度设置为0，并将不透明度设置为5秒。  
 当DOM被加载时，body被赋予一个将div不透明度设置为1的类。  
 我期待div不透明度从5秒过渡到1。 但由于某种原因，它会立即发生。  
 如果我使用setTimemout，每个按预期工作：  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: crimson;
        }

        div {
            transition: opacity 5s;
            font-size: 4em;
            opacity: 0;
        }

        .loaded div {
            opacity: 1;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                document.getElementById('body').className += "loaded";
            }, 0);
        })
    </script>
</head>
<body id="body">
<div>
TEST
</div>
</body>
</html>
 
 让我感到惊讶的是DOMContentLoaded事件触发后，样式被加载。 这是正常行为还是我在这里做错了？ 

Consider the following HTML document: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: crimson;
        }

        div {
            transition: opacity 5s;
            font-size: 4em;
            opacity: 0;
        }

        .loaded div {
            opacity: 1;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('body').className += "loaded";
        })
    </script>
</head>
<body id="body">
<div>
TEST
</div>
</body>
</html>
 
The div is supposed to have its opacity set to 0 and a 5s transition on opacity. 
When the DOM is loaded, the body is given a class that set the div opacity to 1. 
I'm expecting the div opacity to transition from 0 to 1 in 5s. But for some reason, it happens immediately. 
If I use setTimemout, every works as expected: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            background: crimson;
        }

        div {
            transition: opacity 5s;
            font-size: 4em;
            opacity: 0;
        }

        .loaded div {
            opacity: 1;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                document.getElementById('body').className += "loaded";
            }, 0);
        })
    </script>
</head>
<body id="body">
<div>
TEST
</div>
</body>
</html>
 
Makes me wonder is styles are loaded after DOMContentLoaded event is triggered. Is this a normal behavior or am I doing something wrong here ?

原文：https://stackoverflow.com/questions/46989755

更新时间：2022-03-28 19:03

最满意答案

不固定的星号
var reg=/^(.{2})(.*)(.{2})$/;
var str="sadf[.，saj#ofief";
str.replace(reg,"$1****$2");

///////////////////////////////////////////

固定的星号
var reg=/^(.{2})(.*)(.{2})$/;
var str="sadf[.，saj#ofief";
str=str.replace(reg,function(a,b,c,d){
    return b+c.replace(/./g,"*")+d;
});
console.log(str);

其他回答

<script language="javascript" type="text/javascript">      var str="did in (&100005&,&30001&,&30002&)";      for (var i=0;i<str.length;i++)      {          str=str.replace("&","'");      }      alert(str);  &lt;&#47;script&gt;

在DOMContentLoaded触发后应用样式？(Are styles applied after DOMContentLoaded is triggered?)

最满意答案

其他回答

相关问答

正则表达式这个字符串如何表示？[2023-05-30]

python:正则表达式:替换字符串的问题[2023-12-03]

正则表达式替换字符串[2023-06-17]

正则表达式匹配字符串的问题[2022-08-06]

mysql正则表达式替换字符串[2023-10-21]

正则表达式替换字符串[2022-03-19]

JAVA正则表达式替换字符串问题[2023-10-21]

求一个正则表达式，用来替换字符串。。[2023-08-08]

正则表达式，字符串模板替换[2022-07-11]

正则表达式替换字符串中间部分字符[2023-07-06]

相关文章

最新问答

在DOMContentLoaded触发后应用样式？(Are styles applied after DOMContentLoaded is triggered?)

最满意答案

其他回答

相关问答

正则表达式 这个字符串如何表示？[2023-05-30]

python:正则表达式:替换字符串的问题[2023-12-03]

正则表达式替换字符串[2023-06-17]

正则表达式匹配字符串的问题[2022-08-06]

mysql正则表达式替换字符串[2023-10-21]

正则表达式替换字符串[2022-03-19]

JAVA正则表达式替换字符串问题[2023-10-21]

求一个正则表达式，用来替换字符串。。[2023-08-08]

正则表达式，字符串模板替换[2022-07-11]

正则表达式 替换字符串中间部分字符[2023-07-06]

相关文章

最新问答

正则表达式这个字符串如何表示？[2023-05-30]

正则表达式替换字符串中间部分字符[2023-07-06]