私は小さな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>
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';
純粋なJSでは、 getElementsByTagName
ですべてのdivを取得し、content
クラス名でフィルタリングできます。
新しいブラウザの場合(特にIEの場合):
getElementsByClassName
を実行してから、divであるものすべてをフィルタリングすることもできます。querySelectorAll
を使用すると、一致するリストが直接返されます。次に、一致するそれぞれについて、以下を実行します。
currentDiv.style.top = myHeight;
currentDiv.style.width = myWidth;
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);
これにより、説明したスタイル要素が作成され、ドキュメントのヘッドに追加されて適用されます。
jQueryはInternet Explorerを含むすべてのブラウザーで動作しますが、jQueryが必要です。 JavaScriptは、Internet Explorerを除くすべてのブラウザーで機能します。代わりに、JavaScriptが無効になっているときに機能する純粋なCSSを使用することもできます。どちらが最適に動作するか試してください:)。
var width = body.offsetWidth;
var height = body.offsetHeight;
var _content = document.querySelectorAll(".content");
content.style.width = width + "px";
content.style.height = height + "px";
var width = $(document).width();
var height = $(document).height();
var _content = $('.class');
content.style.width = width + "px";
content.style.height = height + "px";
.content {
margin:auto;
top:100%;
width:100%;
}
また、 [〜#〜] less [〜#〜] のようなものを使用することを検討することもできます。