使用.css()和像素值设置左、上、宽度和高度参数可以正常工作，但使用百分比值却不行？

Question

在这段jQuery代码中，我像这样在canvas div上绘制一个正方形：

$(document).ready(function() {
    var canvas = $('#canvas');
    canvas.append('<div id="1"></div>');
    $('#1').addClass('ui-boxer')
                .css({ border: '1px solid white',
                       background: 'orange',
                       padding: '0.5em',
                       position: 'relative',
                       'z-index': 100,
                       left: 1, top: 1,
                       width: 50, height: 50});        
});

这个可以正常工作。但我需要使用百分比而不是像素值来设置左、上、宽度和高度参数。我尝试过这样做，但它没有生效：

$(document).ready(function() {
    var canvas = $('#canvas');
    canvas.append('<div id="1"></div>');
    $('#1').addClass('ui-boxer')
                .css({ border: '1px solid white',
                       background: 'orange',
                       padding: '0.5em',
                       position: 'relative',
                       'z-index': 100,
                       left: 1%, top: 1%,
                       width: 50%, height: 50%});        
});

我在这里做错了什么？谢谢阅读。

- ben

Answer 1

它们需要是字符串：'1%'而不仅仅是1％。Javascript无法理解%符号本身。

因此：

$(document).ready(function() {
    var canvas = $('#canvas');
    canvas.append('<div id="1"></div>');
    $('#1').addClass('ui-boxer')
                .css({ border: '1px solid white',
                       background: 'orange',
                       padding: '0.5em',
                       position: 'relative',
                       'z-index': 100,
                       left: '1%', top: '1%',
                       width: '50%', height: '50%'});        
});

- Nathan MacInnes

Answer 2

您需要引用百分比：

width: '50%'

- nonopolarity