2

cssシートのjsで計算された数字を使用したいと思います。

私はこのjsを持っています：

<script type="text/javascript">

//js cut out here

//document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
alert('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');

//-->
</script>

にはアラートがあり、viewportwidthはブラウザの幅を示し、viewportheightはブラウザウィンドウの高さを示します。これらの番号を使用したいのは、次のようなスタイルシートです。

<style type="text/css">
html, body, 
#page {
    width:   100%;
    height:  100%;
    margin:  0;
}
#map_canvas {
    width:   (viewportwidth-200) px;
    height:  viewportheight;
}
#sidebar {
    width:200px;
    height:viewportheight px;
    overflow:auto;
}
</style>

これを行うことは可能ですか？

私はこれを見つけました：JavaScript変数をCSS変数に解析します

しかし、私はそれを機能させるのに問題があります

4

4 に答える 4

4

JavaScriptを使用して、特定の要素のスタイルを変更できます。

document.getElementById('map_canvas').style.width = "800px";
于 2012-08-20T16:33:07.043 に答える
2

JSでCSSスタイルシートを変更することはできません。ただし、要素にインラインスタイルを適用するか<style>、元のスタイルシートの後に新しいタグを追加することで、スタイルシートをオーバーライドできます。

変数を使用してviewportheightいます...

オプション1：

myEl.style.height = viewportheight + 'px';

オプション2：

var style = document.createElement('style');
style.type = 'text/css'; style.rel = 'stylesheet';
style.innerHTML = '#map_canvas { height: ' + viewportheight + 'px; }';
document.head.appendChild(style);

さらに、LESSはある程度興味深いかもしれません。

于 2012-08-20T16:28:26.423 に答える
0

jQueryを使用できる場合は、これが最適なオプションです。この.width()関数は、ウィンドウを含むオブジェクトの現在の幅を提供し、オブジェクトの幅を設定するためにも使用できます。イベントにハンドラーを設定して、.resize()ウィンドウを含むオブジェクトでサイズ変更が発生した場合でも、オブジェクトのサイズを継続的に変更することもできます。

コードをデモするjsFiddleを作成しました。

この例では、ドキュメントの読み込み時にサイズを設定してから、ウィンドウのサイズ変更イベントでハンドラーを設定してdiv、例で使用しているサイズのサイズを調整し続けます。これが、実際のサイズ変更を行うJavaScript/jQueryコードです。

$(document).ready(function() {
    adjustCanvasSize();

    $(window).resize(function() {
        adjustCanvasSize();
    });
});

function adjustCanvasSize() {
    var win = $(window);
    var width = win.width();
    var height = win.height();   
    var canvas = $('#map_canvas');
    canvas.width(width - 200);
    canvas.height(height);
}
于 2012-08-20T16:42:57.073 に答える
0

今のところ、JavaScriptでスタイルを設定する（そしてビューポートが変更されるたびにスタイルを更新する）のが最善の方法です。CSS3は、ビューポートの幅と高さをそれぞれ基準にして長さを指定できる単位を追加vwします。vh機能と組み合わせることで、calcやりたいことができます。どちらも実験的なものであり、古いブラウザではまだサポートされていないため、これは実際には将来の参照用です（http://caniuse.com/viewport-unitsおよびhttp://caniuse.com/calcを参照）。

また、vwとvhはパーセンテージであるため、幅全体が。であることに注意して100vwください。

<style type="text/css">
html, body, 
#page {
    width:   100%;
    height:  100%;
    margin:  0;
}
#map_canvas {
    width:  -webkit-calc(100vw - 200px);
    width:  -moz-calc(100vw - 200px);
    width:  calc(100vw - 200px);
    height: 100vh;
}
#sidebar {
    width:    200px;
    height:   100vh;
    overflow: auto;
}
</style>
于 2012-08-20T17:11:02.563 に答える