16

我正在处理一个小的 html 页面。我正在使用 javascript 来获取屏幕的尺寸。我需要将该变量传递给如下的 CSS 样式。我怎样才能做到这一点？另外我注意到我需要将“px”放在值的末尾，比如 top:100px 而不是 top:100。我怎样才能将它添加到我的变量中？谢谢你的帮助

<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）：

然后对于每个匹配，执行：

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 之外的所有浏览器。或者，您可以使用纯 CSS，它在禁用 JavaScript 时有效。尝试最有效的方法:)。

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 Not sure 这是否适合您的选项。

于 2013-05-11T22:48:20.537 回答