convert jquery code to javascript

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.

<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

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

    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 - getElementsByTagName). 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

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