将jQuery代码转换为JavaScript

Question

I have a jquery script that i want to convert in 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> 

I have tried and here is the output. But it is not working and giving error in console.

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>

It seems there is an error in line:

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

Answer 1

getElementsByTagName returns an array-like NodeList object , not an element. You can't set style on it. You have to loop over it and set the style on each member (which will be elements) of it in turn.

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>

• Add DOMContentLoaded event and place your JavaScript inside it.
• Reference the function.

You can write the below code

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

as

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

• Use document.documentElement to access 'html' element

Answer 3

getElementsByTagName returns an nodeList over which you would need to loop.

An alternative would be to use querySelector which returns a single element instead:

document.querySelector('html');

Answer 4

You are calling the addCSSTransform function before it is defined. Move the call to after the function declaration, ie:

    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();

as suggested by Vigneswaran, you may wish to bind the call to a DOMContentLoaded event (equivalent to $(document).ready ) as follows:

document.addEventListener('DOMContentLoaded', addCssTransform);

The suggestions above regarding nodeLists returned from getElementsByTagName are also correct (the clue's in the name - getElement s ByTagName). There will (or should!) only ever be one html element, so you can safely replace document.getElementsByTagName("html").style with document.getElementsByTagName("html")[0].style