将 Javascript 变量解析为 CSS 变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5424824/
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
Parse Javascript variable to CSS variables
提问by smulholland2
Possible Duplicate:
Avoiding repeated constants in CSS
可能的重复：
避免 CSS 中的重复常量
I have a javascript file that I am using to obtain the width and height of the viewport to adjust my site's resolution. I can get these values with javascript, but I don't really know where to go from here. I'd like to send the values to my CSS variables but I have not found a way to do this quickly. Is it possible? Here is my JS code:
我有一个 javascript 文件，我用它来获取视口的宽度和高度来调整我网站的分辨率。我可以使用 javascript 获取这些值，但我真的不知道从哪里开始。我想将值发送到我的 CSS 变量，但我还没有找到快速执行此操作的方法。是否可以？这是我的 JS 代码：
<script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>
For the CSS I was hoping to get away with something quick and easy but its not working:
对于 CSS，我希望能够快速轻松地摆脱困境，但它不起作用：
@variables{
ViewWidth:'+viewportwidth+';}
@variables{
ViewHeight:'+viewportheight+';}
html{
max-width: var(ViewWidth);
max-height: var(ViewHeight);}
I am assuming that I have the incorrect syntax within the variable declarations. I wrote it that way to show that I am trying to get the variable value from JS and pass it to CSS.
我假设变量声明中的语法不正确。我这样写是为了表明我正在尝试从 JS 获取变量值并将其传递给 CSS。
采纳答案by Eric Wendelin
I think you're looking for something similar to this:
我认为你正在寻找类似的东西：
var parentElement = document.documentElement || document.body;
parentElement.style.maxWidth = parentElement.clientWidth + 'px';
parentElement.style.maxHeight = parentElement.clientHeight + 'px';
回答by user123444555621
As others mentioned, you can use individual elements' styleproperty. If you want generic rules like .myClass { width: myVar }, you're gonna have to produce the whole CSS rule at runtime:
正如其他人提到的，您可以使用单个元素的style属性。如果你想要像 那样的通用规则.myClass { width: myVar }，你将不得不在运行时生成整个 CSS 规则：
回答by Jake Kalstad
You want to add the css dynamically with the javascript, each element has its style and corresponding elements relating to css, use javascript to manipulate these
你想用javascript动态添加css，每个元素都有它的样式和与css相关的对应元素，使用javascript来操作这些
myHtmlElement.style.backgroundColor='green';
something along those lines should be fine.
沿着这些路线的东西应该没问题。
