Question

我有一个较旧的网站，我需要变得更有活力。该网站有一个嵌套在div中的图表。我遇到的问题是有javascript代码硬编码div容器的高度和宽度。我尝试将大小金额（350）更改为自动和百分比（10％），但它会破坏程序。我无法弄清楚程序如何将整数值转换为像素值，但这可能只是我对javascript的无能。我可能错过了一些重要信息，如果您还有其他需要，请告诉我。感谢

的Javascript

var stage = new Kinetic.Stage({
    container: 'conKinetic',
    width: 1100,
    height: 350
});

HTML

<div class='fourthDiv' id="conKinetic">
    ....This div holds the graphics
</div>

Answer 1

如果您使用的是jQuery，可以将宽度和高度设置为百分比，然后以这种方式传递当前像素单位：

var stage = new Kinetic.Stage({
    container: 'conKinetic',
    width: $('#conKinetic').width(),
    height: $('#conKinetic').height()
});

当然，您可以修改width或height值以使其适应您的布局：

width: $('#conKinetic').width() - 50,

考虑这个例子：

＆＃13;

$(document).ready( function() {
    $('body').append( 'My width is 50%, equivalent to ' + $( '#hi' ).width() + ' px.');
});

＆＃13;

body { width: 100%; }
#hi { width: 50%; background-color: red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hi">hello!</div>

＆＃13;

希望它有所帮助！

Javascript创建一个响应式容器

1 个答案: