Html Javascript 变量到 css

Javascript variable to css

提问by fghajhe

I am working on a small html page. I am using javascript to get the dimensions of the screen. I need to pass that variable to a css style like below. How can I do this? Also I notice that I need to put the "px" at the end of the value, like top: 100px not top:100. How can I add that to my variable as well? Thanks for any help

我正在处理一个小的 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>

采纳答案by Robin Rizvi

If you intend to use LESS CSSyou can try out this :

如果你打算使用LESS CSS，你可以试试这个：

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

If you intend to use JQUERYyou can try out this :

如果你打算使用JQUERY你可以试试这个：

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

If you intend to use JSyou can try out this :

如果你打算使用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';

回答by Joseph

With pure JS, you could get all div via getElementsByTagName, then filter for a contentclass name.

使用纯 JS，您可以通过 获取所有 div getElementsByTagName，然后过滤content类名。

For newer browsers (most especially for IE):

对于较新的浏览器（尤其是 IE）：

• You could also do getElementsByClassName, then filter all those that are divs.
• You could use querySelectorAllwhich directly returns a list of matches.

• 你也可以做getElementsByClassName，然后过滤所有的div。
• 您可以使用querySelectorAllwhich 直接返回匹配列表。

Then for each that match, do:

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

currentDiv.style.top = myHeight;
currentDiv.style.width = myWidth;

回答by Joseph

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);

This creates the style element that you have described and appends it to the head of the document, applying it.

这将创建您所描述的样式元素并将其附加到文档的头部，应用它。

回答by Qvcool

jQuery works with all browsers, even Internet Explorer, but you need jQuery. The JavaScript works with all browsers, except for Internet Explorer. Alternative you could use pure CSS, which works when JavaScript is disabled. Try whichever works best :).

jQuery 适用于所有浏览器，甚至 Internet Explorer，但您需要 jQuery。JavaScript 适用于所有浏览器，Internet Explorer 除外。或者，您可以使用纯 CSS，它在禁用 JavaScript 时有效。尝试哪个效果最好:)。

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";

Or jQuery

或者 jQuery

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

Or CSS

或 CSS

.content {
    margin:auto;
    top:100%;
    width:100%;
}

回答by Brandon Tripp

Also you could consider using something like LESSNot sure if this is an option for you or not.

您也可以考虑使用LESS 之类的东西不确定这是否适合您。