16

私は小さなhtmlページに取り組んでいます。画面のサイズを取得するためにJavaScriptを使用しています。その変数を以下のような CSS スタイルに渡す必要があります。これどうやってするの？また、top:100 ではなく top:100px のように、値の末尾に「px」を付ける必要があることにも気付きました。それを自分の変数にも追加するにはどうすればよいですか? 助けてくれてありがとう

<script type="text/javascript">
    var percent =1;
    var myWidth = Math.round( screen.width * percent);
    var myHeight = Math.round( screen.height * percent);
</script>

<style type="text/css">
    div.content {
margin: auto;
top: myHeight ;
width: myWidth ;
    }
</style>
4

5 に答える 5

16

LESS CSSを使用する場合は、これを試すことができます。

    @percent: 1;
    @height: `Math.round( screen.height * @{percent})`;
    @width: `Math.round( screen.width * @{percent})`;
    div.content {
    margin: auto;
    top: @height;
    width: @width;
    }

JQUERYを使用する場合は、これを試すことができます。

var percent=1;
$("div.content").css('top', Math.round( screen.height * percent)+'px');
$("div.content").width(Math.round( screen.width * percent));

JSを使用する場合は、これを試すことができます。

var percent=1;
document.querySelector('div.content').style.top = Math.round( screen.height * percent)+'px';
document.querySelector('div.content').style.width = Math.round( screen.width * percent)+'px';
于 2013-05-11T23:19:56.107 に答える
4

純粋な JS を使用すると、 を介してすべての div を取得し、クラス名getElementsByTagNameでフィルター処理できます。content

新しいブラウザーの場合 (特に IE の場合) :

  • getElementsByClassNameを実行して、div であるすべてのものをフィルタリングすることもできます。
  • querySelectorAll一致のリストを直接返す which を使用できます。

次に、一致するそれぞれに対して、次のことを行います。

currentDiv.style.top = myHeight;
currentDiv.style.width = myWidth;
于 2013-05-11T22:45:36.710 に答える
3 
var myCss = "div.content { margin: auto; top: " + 
    myHeight + "; width: " + myWidth + " ; }";

var myStyle = document.createElement('style');
myStyle.type = 'text/css';
myStyle.styleSheet ? myStyle.styleSheet.cssText = myCss : 
    myStyle.appendChild(document.createTextNode(myCss));

document.getElementsByTagName("head")[0].appendChild(myStyle);

これにより、記述したスタイル要素が作成され、ドキュメントのヘッドに追加されて適用されます。

于 2013-05-11T22:53:29.520 に答える
1

jQuery は Internet Explorer を含むすべてのブラウザーで動作しますが、jQuery が必要です。JavaScript は、Internet Explorer を除くすべてのブラウザーで動作します。代わりに、JavaScript が無効になっている場合に機能する純粋な CSS を使用できます。最適なものを試してみてください:)。

JavaScript

var width = body.offsetWidth;
var height = body.offsetHeight;
var _content = document.querySelectorAll(".content");
content.style.width = width + "px";
content.style.height = height + "px";

またはjQuery

var width = $(document).width();
var height = $(document).height();
var _content = $('.class');
content.style.width = width + "px";
content.style.height = height + "px";

またはCSS

.content {
    margin:auto;
    top:100%;
    width:100%;
}
于 2013-05-11T23:26:53.550 に答える
0

また、 LESSのようなものを使用することを検討することもできます。これがオプションであるかどうかはわかりません。

于 2013-05-11T22:48:20.537 に答える