change margin-left with JS

Question

I want a dynamical margin-left on a given div.

I tried this code :

window.onload = function()
{
    var pageWidth = window.innerWidth; 
    var size = (pageWidth - 200 ) / 2;
    $('#search').css('margin-Left', size));
    alert(size);
 };

which doesn't work (the alert is here just for test purpose), the problem is coming from the ligne $('#search').css('margin-Left', size)); but I can't find out where...

I've tried with a lowercase l on margin-left and didn't work.

Answer 1

以下是否适合您？

document.getElementById("search").style.marginLeft = size + "px";

Answer 2

Try using marginLeft, without the hypen.

jQuery.css() documentation: http://api.jquery.com/css/

Answer 3

您需要指定要使用的单位类型。

$('#search').css('margin-left', size + 'px');

Answer 4

JAVASCRIPT

$(document).ready(function(e){
    alert('test');
    var pageWidth = parseInt($(window).innerWidth());
    alert(pageWidth);
    var size = (pageWidth - 200 ) / 2;
    $('#search').css('margin-left', size);
    alert(size);
})

HTML

<div id = 'search'></div>

CSS

#search
{
    height:100px;
    width:100px;
    background-color:#F00;
}

FIDDLE LINK