將jQuery代碼轉換為JavaScript

Question

我有一個要在javascript中轉換的jquery腳本。

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對象 ，而不是元素。 您無法在其上設置style 。 您必須遍歷它，並依次在其每個成員（將是元素）上設置樣式。

Answer 2

<script type="text/javascript">
    // Add 'DOMContentLoaded' event
    document.addEventListener('DOMContentLoaded', function () {

        addCssTransform();

        // NOTE: Just reference the function. Don't create new one unless needed
        window.addEventListener('resize', addCssTransform, false);

        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) {

                // If you are adding styles to 'html' element, use available 'document.documentElement' property
                document.documentElement.style.fontSize = zoomRatio + '%';
                //$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */

            }
        }
    }, false);
    </script>

• 添加DOMContentLoaded事件並將JavaScript放入其中。
• 引用功能。

您可以編寫以下代碼

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

如

window.addEventListener('resize', addCssTransform, false);

• 使用document.documentElement訪問'html'元素

Answer 3

getElementsByTagName返回需要循環的nodeList。

一種替代方法是使用querySelector ，它返回單個元素：

document.querySelector('html');

Answer 4

在定義之前，您正在調用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 */

        }
    };

    addCssTransform();

如Vigneswaran所建議，您可能希望將調用綁定到DOMContentLoaded事件（相當於$(document).ready ），如下所示：

document.addEventListener('DOMContentLoaded', addCssTransform);

上面關於從getElementsByTagName返回的nodeLists的建議也是正確的（提示中的線索是 -getElement的ByTagName）。 只會（或應該！）只有一個html元素，因此您可以用document.getElementsByTagName("html")[0].style安全地替換document.getElementsByTagName("html").style