JSFiddle - React, Tailwind, and code Playground

by Hao Cui

HTML

<button id="showsize">显示html元素长宽</button>
<p id="size">占位占位！<p>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum</p>

CSS

html {
    border: 2px solid green;   
}

body {
    border: 1px solid;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEyOCIgd2lkdGg9IjEyOCI+CiAgPGNpcmNsZSBjeD0iNjQiIGN5PSI2NCIgcj0iNjQiIGZpbGw9InJlZCIvPgo8L3N2Zz4K");
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 10000px;
    width: 10000px;
}

JavaScript

$("#showsize").click(function () {
    $("#size").text(
        "Height = " +  document.documentElement.clientHeight +
        ", Width = " + document.documentElement.clientWidth);
});