0

Hi everyone I was just wondering if anyone know how to convert this css/jquery code into javascript DOM code?

I started coding my entire code using javascript DOM for a project but then I found this code which will make the background image move upwards in an infinite loop.

I just need some help in figuring out how to convert the code since I know nothing about jquery.

    $(function(){
            var x = 0;
            setInterval(function(){
                $('body').css('background-position','0'+--x + 'px');
            }, 10);
    })
    html,body {    height: 100%; overflow: hidden;}
    body {
        background-image: url('http://lorempixel.com/1900/1200/');
        background-repeat: repeat-y;
        background-size: 100% 100%;
    }

html,body {    height: 100%; overflow: hidden;}
body {
    background-image: url('http://lorempixel.com/1900/1200/');
    background-repeat: repeat-y;
    background-size: 100% 100%;
}

$(function(){
        var x = 0;
        setInterval(function(){
            $('body').css('background-position','0'+--x + 'px');
        }, 10);
})

1 Answer 1

1

$('body') selects the body element; .css(prop, value) sets the CSS property prop to value. With the plain DOM API, you can get the body using document.body and assign styles by assigning to properties on the element’s style, noting that hyphenated-names become camelCase.

var x = 0;

setInterval(function () {
    document.body.style.backgroundPosition = '0 ' + --x + 'px';
}, 10);
Sign up to request clarification or add additional context in comments.

1 Comment

If you want to avoid the camelisation, you can also do elem.style[prop] = ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.