javascript - 如何通过 Javascript 动态更改 css

Question

我的全局 css 文件包含以下代码

#menu_left
 {
  color: #004080;
  width: 225px;
  margin: 0px;
  border-style: solid solid none solid;
  border-color: #ffffff;
  border-size: 1px;
  border-width: 1px;
 }

#menu_left li a
{
 color: #222222;
 height: 26px;
 voice-family: inherit;
 text-decoration: none;
 border-bottom: solid 1px #ffffff;
 background-color:#D3D7D9;
 font-size:12px;
 font-family:tahoma;
}

#menu_left li a:link, #menu_left li a:visited
{
 color: #222222;
 display: block;
 padding: 8px 0 0 10px;
 border-bottom: solid 1px #ffffff;
 background-color:#D3D7D9;
 font-size:12px;
 font-family:tahoma;
}
#menu_left li a:hover
{
 color: #222222;
 padding: 8px 0 0 10px;
 border-bottom: solid 1px #ffffff;
 font-weight:normal;
 background-color:#B9C4CA;
 font-size:12px;
 font-family:tahoma;
}

截至目前，我已将 #menulefft id 分配给包含 li(列表标签)的 div，并且每个 li 标签都有一个 anchor 标签。我所有的 li 都将作为列表出现在左侧面板中。一旦我选择了任何 li，它应该显示一些 css 样式，而其他的应该有上面的 css。

我已经编写了一个 js 函数来在选择和取消选择时切换这些 css 更改。

但是悬停 css 不适用，如果像下面那样...

function setSelected(selID)//selId is ID for anchor tag in selected li item
{
 //contains all list of anchor tag id's
  var anchorID=['usersAnchor','securityAnchor','passPolAnchor','activeSessAnchor'];
  for(i=0;i<anchorID.length;i++)
   {
     if(selID!=anchorID[i])
     {
        var div = document.getElementById(anchorID[i]);
        div.style.fontWeight = 'bold';
        div.setAttribute('style','color: #222222;height: 26px;voice-family: inherit;text-decoration: none;border-bottom: solid 1px #ffffff;background-color:#D3D7D9;font-size:12px;font-family:tahoma;');
        }
     else

     {
         var div = document.getElementById(selID);
         div.style.fontWeight = 'bold';
         div.setAttribute('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');
        }
   }

任何人都可以帮助我如何获得所有 css 属性，以便在切换选择时它应该适用于选择悬停和正常？

问候，喀麦什

Answer 1

在您的 setSelected 中，您将在设置后立即覆盖粗体样式。也就是说，您可以更轻松地处理 CSS。

与其在节点级别设置 css，不如使用 css 的发明目的？

您可以设置一个selected 类，并在您的代码中切换className

.selected {
   color: #222222;
   height: 26px;
   voice-family: inherit;
   text-decoration: none;
   border-bottom: solid 1px #ffffff;
   background-color:#D3D7D9;
   font-size:12px;
   font-family:tahoma;
}

一个简单的 JS 函数负责类交换:

function setSelected(selID) {
   var anchorIDs = {
       'usersAnchor': true
       'securityAnchor': true
       'passPolAnchor': true
       'activeSessAnchor': true
   };
   var div = document.getElementById(selID),
   className = div.className;

   if (anchorIDs[selID] === true) {
       div.className = className.replace(/\s+(selected)/, " selected");
   } else {
       div.className = className.replace(/\s+(selected)/, "");
   }
}