javascript - 将 jquery 代码转换为 JavaScript

Question

我有一个 jquery 脚本，我想将其转换为 JavaScript。

Jquery:

<script type="text/javascript">
    $(document).ready( function() {

        addCssTransform();

        $( window ).resize(function() {
            addCssTransform();
        });

        function addCssTransform() {
            var docWid = $(document).width();
            var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
            var actualWidth = w - (w - docWid);

            var zoom = actualWidth / 1280;
            var zoomRatio = zoom *100;
            console.log(zoomRatio);
            if(actualWidth > 1280) {
                $('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */

            }
        }
    });
</script> 

我已经尝试过，这是输出。但它不起作用并在控制台中给出错误。

JavaScript:

<script type="text/javascript">
 addCssTransform();

      window.addEventListener('resize', function(event){
            addCssTransform();
        });

        function addCssTransform() {
            var docWid = document.body.clientWidth;
            var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
            var actualWidth = w - (w - docWid);

            var zoom = actualWidth / 1280;
            var zoomRatio = zoom *100;
            console.log(zoomRatio);
            if(actualWidth > 1280) {
                document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';
                //$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */

            }
        };
    </script>

行中似乎有错误:

document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';

Answer 1

getElementsByTagName 返回类似数组的 NodeList object ，不是一个元素。您无法对其设置style。您必须对其进行循环并依次为其每个成员(将是元素)设置样式。