Html Javascript 变量到 css

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16502401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:18:55  来源:igfitidea点击:

Javascript variable to css

javascripthtmlcssvariables

提问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)

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 之类的东西不确定这是否适合您。