Javascript 设置元素'；s高度至<；车身>'；s宽度及其宽度至<；车身>'；s高度动态变化

我希望将

.container

的高度动态设置为

的宽度，将其高度设置为

的宽度，并在调整窗口大小时更改

我之所以要这样做，是因为我正试图通过将“.container”-旋转90度，并将其内容旋转90度，来创建一个仅限于CSS的水平滚动页面

容器当前具有100%的高度和宽度，但一旦通过CSS旋转，它将保留其继承的尺寸，并且不会延伸到浏览器窗口大小，我认为这只是合乎逻辑的

除了更改jquery插件中的值之外，我对javascript了解不多，但我认为可以使用js动态地将

.container

的高度和宽度分别更改为

的计算宽度和高度

---

jsfiddle:

这就是你想要的东西吗

var supportsOrientationChange = 'onorientationchange' in window, orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize';

var $containment = document.getElementsByClassName('containment')[0];

$containment.style.width = window.innerHeight + 'px';
$containment.style.height = window.innerWidth + 'px';

window.addEventListener(orientationEvent, function() {
    $containment.style.width = window.innerHeight + 'px';
    $containment.style.height = window.innerWidth + 'px';
}, false);

---

这是你的笔叉：

这就是你想要的东西吗

var supportsOrientationChange = 'onorientationchange' in window, orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize';

var $containment = document.getElementsByClassName('containment')[0];

$containment.style.width = window.innerHeight + 'px';
$containment.style.height = window.innerWidth + 'px';

window.addEventListener(orientationEvent, function() {
    $containment.style.width = window.innerHeight + 'px';
    $containment.style.height = window.innerWidth + 'px';
}, false);

---

这是你的笔叉：

你最想要的是。哪个是

.resize（）

event@Ohgodwhy就像我说的，我是一个彻头彻尾的js noob，不知道如何使用它：/，如果你能做一个演示，我将不胜感激。可以这样做。@Ohgoodwhy感谢您花时间制作演示，但Matt得到了最适合我的答案。：）您最可能想要的是。哪个是

.resize（）

event@Ohgodwhy就像我说的，我是一个彻头彻尾的js noob，不知道如何使用它：/，如果你能做一个演示，我将不胜感激。可以这样做。@Ohgoodwhy感谢您花时间制作演示，但Matt得到了最适合我的答案。：）使用它似乎给了容器窗口的高度和宽度，而不是

。然而，这是极好的。谢谢你，马特！下面是html中只包含必要元素的结果。使用它似乎给容器提供了窗口的高度和宽度，而不是

。然而，这是极好的。谢谢你，马特！下面是只包含html中必要元素的结果。