Javascript創建一個響應容器

我有一箇舊網站，我需要變得更加動態。該網站有一個嵌套在div內的圖表。我遇到的問題是有JavaScript代碼，它會對div容器的高度和寬度進行硬編碼。我嘗試將尺寸數量（350）更改爲自動和百分比（10％），但它打破了程序。我無法弄清楚程序如何將整數值轉換爲像素值，但這可能只是我對javascript的無能。我可能錯過了一些重要的信息，所以讓我知道你是否需要其他的東西。由於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>

來源

2015-09-09 Markus

如果該類實際上是'fourthDiv'我建議您立即刪除該類，因爲它違背了每個約定，並且肯定會破壞可維護性。 –

如果要操縱容器內畫布的佈局，還應查看有關使用[Kinetic.js]（http://kineticjs.com/）的文檔。 – kolunar

如果你使用jQuery，您可以設置寬度和高度百分比，然後通過當前的像素單元以這種方式：

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

當然，你可以編輯width或height值，以使其適應您的佈局：

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

考慮這個例子：

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

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

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

希望它能幫助！

來源

2015-09-09 16:46:12 David

Javascript創建一個響應容器

回答

相關問題