解析JavaScript變量的CSS變量

可能重複：
Avoiding repeated constants in CSS 解析JavaScript變量的CSS變量

我有我使用獲得視口的寬度和高度來調整我的網站的分辨率的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>

因爲我希望的東西快速和容易的，但逃脫的CSS它不工作：

@variables{ 
ViewWidth:'+viewportwidth+';} 

@variables{ 
ViewHeight:'+viewportheight+';} 

html{ 
max-width: var(ViewWidth); 
max-height: var(ViewHeight);}

我假設我中了不正確的語法變量聲明。我這樣寫了，以表明我試圖從JS獲取變量值並將其傳遞給CSS。

來源

2011-03-24 smulholland2

JavaScript中的CSS是計算後進行解析。您需要使用元素的javascript樣式屬性來完成此操作。 – 2011-03-24 20:05:57

我很抱歉把它分解給你，但你沒有CSS變量。 – harpo 2011-03-24 21:05:33

我認爲你正在尋找一些與此類似：

var parentElement = document.documentElement || document.body; 
parentElement.style.maxWidth = parentElement.clientWidth + 'px'; 
parentElement.style.maxHeight = parentElement.clientHeight + 'px';

來源

2011-03-24 20:12:21

你想使用JavaScript動態添加CSS，每個元素都有其風格和與CSS相應的元素，使用JavaScript來操縱這些

myHtmlElement.style.backgroundColor='green';

類似的規定應該罰款。

來源

2011-03-24 20:05:20

在我的情況下，'body.style.min-width ='+ viewportwidth +';'應該可以工作嗎？ – smulholland2 2011-03-24 22:08:53

viewportwidth需要是一個javascript變量，但您可以像獲取最小寬度一樣輕鬆地抓取視口寬度屬性，並使用該值設置它。 – 2011-03-24 22:14:41

正如其他人所提到的，可以使用單個元素style財產。如果你想要一個像.myClass { width: myVar }通用的規則，你得在運行時產生的整個CSS規則：

https://developer.mozilla.org/en/DOM/stylesheet.insertRule

來源

2011-03-24 20:56:13 user123444555621

解析JavaScript變量的CSS變量

回答

相關問題