Javascript没有更改CSS变量
我试图操纵CSS变量以从相对于屏幕大小的位置启动菜单，但它不会从样式部分开头初始化的值更改 我的代码可以在Javascript没有更改CSS变量,javascript,css,Javascript,Css,我试图操纵CSS变量以从相对于屏幕大小的位置启动菜单，但它不会从样式部分开头初始化的值更改 我的代码可以在 ：根{ --左侧：50； } #李明伟， #菜单v a{ 缩放：1； } /*IE6、IE7的黑客*/ #菜单-v{ 宽度：180px； /*主菜单项宽度*/ 边框：1px实心#ccc； 边界顶部：无； 位置：相对位置； 字号：0； 列表样式：无； 填充：0； 显示：块； 左边距：计算值（var（--左边）*1px）； 边缘顶端：40px； z指数：9； } #菜单-v ul{ 宽度：1
：根{
--左侧：50；
}
#李明伟，
#菜单v a{
缩放：1；
}
/*IE6、IE7的黑客*/
#菜单-v{
宽度：180px；
/*主菜单项宽度*/
边框：1px实心#ccc；
边界顶部：无；
位置：相对位置；
字号：0；
列表样式：无；
填充：0；
显示：块；
左边距：计算值（var（--左边）*1px）；
边缘顶端：40px；
z指数：9；
}
#菜单-v ul{
宽度：180px；
/*主菜单项宽度*/
边框：1px实心#ccc；
边界顶部：无；
位置：相对位置；
字号：0；
列表样式：无；
填充：0；
显示：块；
保证金：0；
z指数：9；
}
/*顶级菜单链接样式
---------------------------------------*/
#菜单-v李{
背景：#FFF url（bg.gif）repeat-x 0 2px；
列表样式：无；
保证金：0；
填充：0；
}
#菜单-v李a{
字体：普通12px Arial；
边框顶部：1px实心#ccc；
显示：块；
/*溢出：自动；强制IE7中的布局*/
颜色：黑色；
文字装饰：无；
线高：26px；
左侧填充：26px；
}
#菜单-v ul li a{
线高：30px；
}
#menu-v li a.箭头：悬停{
背景图像：url（arrowon.gif）；
背景重复：无重复；
背景位置：97%50%；
}
/*子级菜单项
---------------------------------------*/
#菜单-v li ul{
位置：绝对位置；
宽度：200px；
/*子菜单项宽度*/
可见性：隐藏；
}
#菜单v a箭头{
背景图像：url（arrow.gif）；
背景重复：无重复；
背景位置：97%50%；
}
#menu-v li:悬停，
#菜单-v li.onhover{
背景位置：0-62px；
}
#菜单-v ul li{
背景：rgba（255，255，255，0.86）；
背景图像：无；
}
#menu-v ul li：悬停，
#菜单-v ul li.onhover{
背景：#FFF；
背景图像：无；
}
var alignwithmain菜单=false；
/*垂直菜单-由http://www.MenuCool.com/vertical/vertical-menu. 需要保留此注释*/
函数initmenu（）{
menu-v.style.setProperty（'--LeftSide'，（（document.documentElement.clientWidth/2）-470））；
var e=document.getElementById（“menuV2”）；
var i=即偏离视线；
var b=e.getElementsByTagName（“ul”）；
var g=/msie | msie 6/.test（navigator.userAgent）；
如果（g）{
对于（var h=e.getElementsByTagName（“li”），a=0，j=h.length；ai）{
var f；
如果（b[a]。远视>i）{
f=-d；
}否则{
f=i-b[a]。远视-d；
b[a].style.top=f+“px”；
}
}
}
c、 onmouseover=函数（）{
如果（g）{
this.className=“onhover”；
}
var a=this.getElementsByTagName（“ul”）[0]；
如果（a）{
a、 style.visibility=“可见”；
a、 style.display=“block”；
}
};
c、 onmouseout=函数（）{
如果（g）{
this.className=“”；
}
this.getElementsByTagName（“ul”）[0].style.visibility=“hidden”；
this.getElementsByTagName（“ul”）[0].style.display=“无”；
};
}
对于（变量a=b.length-1；a>-1；a--）{
b[a].style.display=“无”；
}
}
函数getParentOffsetRoot（a，b）{
如果（a.id==“菜单2”）{
返回b；
}否则{
b+=a.偏置；
返回getParentOffsetRoot（a.parentNode.parentNode，b）；
}
}
if（window.addEventListener）{
addEventListener（“加载”，初始菜单，false）；
}否则{
window.attachEvent&&window.attachEvent（“onload”，初始菜单）；
}
//函数myfunction（）{
//document.menu-v.style.setProperty（'--LeftSide'，（（document.documentElement.clientWidth/2）-470））；
// }
//window.onload=myfunction；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="Width=device-Width, initial-scale=1">
<link href="menu-vertical.css" rel="stylesheet" type="text/css" />
<style>
:root {
--LeftSide: 50;
}
#menu-v li,
#menu-v a {
zoom: 1;
}
/* Hacks for IE6, IE7 */
#menu-v {
width: 180px;
/* Main Menu Item widths */
border: 1px solid #ccc;
border-top: none;
position: relative;
font-size: 0;
list-style: none;
padding: 0;
display: block;
margin-left: calc(var(--LeftSide) * 1px);
margin-top: 40px;
z-index: 9;
}
#menu-v ul {
width: 180px;
/* Main Menu Item widths */
border: 1px solid #ccc;
border-top: none;
position: relative;
font-size: 0;
list-style: none;
padding: 0;
display: block;
margin: 0;
z-index: 9;
}
/* Top level menu links style
---------------------------------------*/
#menu-v li {
background: #FFF url(bg.gif) repeat-x 0 2px;
list-style: none;
margin: 0;
padding: 0;
}
#menu-v li a {
font: normal 12px Arial;
border-top: 1px solid #ccc;
display: block;
/*overflow: auto; force hasLayout in IE7 */
color: black;
text-decoration: none;
line-height: 26px;
padding-left: 26px;
}
#menu-v ul li a {
line-height: 30px;
}
#menu-v li a.arrow:hover {
background-image: url(arrowon.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
/*Sub level menu items
---------------------------------------*/
#menu-v li ul {
position: absolute;
width: 200px;
/*Sub Menu Items width */
visibility: hidden;
}
#menu-v a.arrow {
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
#menu-v li:hover,
#menu-v li.onhover {
background-position: 0 -62px;
}
#menu-v ul li {
background: rgba(255, 255, 255, 0.86);
background-image: none;
}
#menu-v ul li:hover,
#menu-v ul li.onhover {
background: #FFF;
background-image: none;
}
</style>
<SCRIPT TYPE="text/javascript">
var alignWithMainMenu = false;
/* Vertical Menu - Developed by http://www.MenuCool.com/vertical/vertical-menu. Retaining this comment is required.*/
function initmenu() {
menu - v.style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));
var e = document.getElementById("menuV2");
var i = e.offsetHeight;
var b = e.getElementsByTagName("ul");
var g = /msie|MSIE 6/.test(navigator.userAgent);
if (g) {
for (var h = e.getElementsByTagName("li"), a = 0, j = h.length; a < j; a++) {
h[a].onmouseover = function () {
this.className = "onhover";
};
h[a].onmouseout = function () {
this.className = "";
};
}
}
for (var a = 0; a < b.length; a++) {
var c = b[a].parentNode;
c.getElementsByTagName("a")[0].className += " arrow";
b[a].style.left = c.offsetWidth + "px";
b[a].style.top = c.offsetTop + "px";
if (alignWithMainMenu) {
var d = getParentOffsetRoot(c.parentNode, 0);
if (b[a].offsetTop + b[a].offsetHeight + d > i) {
var f;
if (b[a].offsetHeight > i) {
f = -d;
} else {
f = i - b[a].offsetHeight - d;
b[a].style.top = f + "px";
}
}
}
c.onmouseover = function () {
if (g) {
this.className = "onhover";
}
var a = this.getElementsByTagName("ul")[0];
if (a) {
a.style.visibility = "visible";
a.style.display = "block";
}
};
c.onmouseout = function () {
if (g) {
this.className = "";
}
this.getElementsByTagName("ul")[0].style.visibility = "hidden";
this.getElementsByTagName("ul")[0].style.display = "none";
};
}
for (var a = b.length - 1; a > -1; a--) {
b[a].style.display = "none";
}
}
function getParentOffsetRoot(a, b) {
if (a.id == "menuV2") {
return b;
} else {
b += a.offsetTop;
return getParentOffsetRoot(a.parentNode.parentNode, b);
}
}
if (window.addEventListener) {
window.addEventListener("load", initmenu, false);
} else {
window.attachEvent && window.attachEvent("onload", initmenu);
}
// function myfunction() {
// document.menu-v.style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));
// }
// window.onload = myfunction;
</SCRIPT>
</head>
<body bgcolor="#bfb9b5">
<ul id="menu-v">
<li><a href="#">Item 1</a></li>
<li>
<a href="#">Item 2</a>
<ul class="sub">
<li><a href="vertical-menu#1">Vertical Menu</a></li>
<li><a href="vertical-menu#2">Vertical Menus</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="sub">
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 3.2</a></li>
<li><a href="#">Sub Item 3.3</a></li>
<li><a href="#">Sub Item 3.4</a></li>
<li><a href="#">Sub Item 3.5</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
<li>
<a href="#">Item 5</a>
<ul class="sub">
<li><a href="#">Sub Item 5.1</a></li>
<li>
<a href="#">Sub Item 5.2</a>
<ul class="sub">
<li><a href="#521">Vertical Menu 5.2.1</a></li>
<li><a href="#522">Vertical Menu 5.2.2</a></li>
<li><a href="#523">Vertical Menu 5.2.3</a></li>
<li><a href="#524">Vertical Menu 5.2.4</a></li>
<li><a href="#525">Vertical Menu 5.2.5</a></li>
</ul>
</li>
<li>
<a href="#">Sub Item 5.3</a>
<ul class="sub">
<li><a href="#">Sub Item 5.3.1</a></li>
<li><a href="#">Sub Item 5.3.2</a></li>
<li><a href="#">Sub Item 5.3.3</a></li>
<li><a href="#">Sub Item 5.3.4</a></li>
<li><a href="#">Sub Item 5.3.5</a></li>
<li><a href="#">Sub Item 5.3.6</a></li>
<li><a href="#537">Vertical Menus 5.3.7</a></li>
<li><a href="#538">Vertical Menus 5.3.8</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6</a></li>
</ul>
</body>
</html>
function myfunction() {
document.menu-v.style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));
}