画像の上に文字載せるコード

ネタ元様
　スコープ汚染は敵だという認識は全プログラマーの総意であり、スコープ汚染に寛容な言語であるCSSは廃さなければならぬ。という傾倒思想に浸かった男がたどり着いたソースコードが下記。
動作

ソースコード

<script>
(function(){
    let imgSrc="https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg";
    let txt="文字";
    
    /*CSS*/
    let figureStyle=
        "position: relative;"
        +"width: 500px;"
    ;
    let imgStyle=
        "vertical-align: top;"
        +"width: 100%;"
    ;
    let figcaptionStyle=
        "font-size: 60px;"
        +"color: #ffffff;"
        +"font-family: sans-serif;"
        +"position: absolute;"
        +"top: 0;"
        +"display: flex;"
        +"width: 100%;"
        +"height: 100%;"
        +"margin: 0;"
        +"align-items: center;"
        +"justify-content: center;"
    ;
    
    /*HTML*/
    let out="";
    out+='<figure style="'+figureStyle+'">'
        +    '<img src="'+imgSrc+'" style="'+imgStyle+'">'
        +    '<figcaption style="'+figcaptionStyle+'">'+txt+'</figcaption>'
        +'</figure>';
    document.write(out);
    //document.write('<figure style="'+figureStyle+'">'+'<img src="'+imgSrc+'" style="'+imgStyle+'">'+'<figcaption style="'+figcaptionStyle+'">'+txt+'</figcaption>'+'</figure>');
}());
</script>

　このソースコードからのスコープ汚染は皆無ですが、普通にHTMLとCSS書いた方がコードが短い上に可読性が良いという。
　上記はまあヘッダーでも使えますが、クリックボタンを想定してコードを書きました。クリックボタンというチョイ物の存在でCSSの所が何十行と幅とったりスコープ汚染するのは私的に気になるので作った次第。

追記
　HTMLでやったけど見辛い。一応載せます。

<figure style="width: 500px;
               position: relative;
               ">
    <img style="width: 100%;
                vertical-align: top;
                "
           src="https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg"
           alt="文字の代替">
    <figcaption style="font-size: 60px;
                       color: #ffffff;
                       font-family: sans-serif;
                       position: absolute;
                       top: 0;
                       display: flex;
                       width: 100%;
                       height: 100%;
                       margin: 0;
                       align-items: center;
                       justify-content: center;
                       ">
        文字
    </figcaption>
</figure>