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;
}

截至目前，我已将#menuleft id分配给我的div，其中包含li（列表标记），每个li标记都有一个锚标记。所有我的李将作为列表进入左侧面板.once我选择任何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属性，以便它可以在选择悬停和正常选择时进行选择？

此致 Kamesh

Answer 1

使用jQuery使您的工作更简单！

而不是使用它：

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;');

当您使用jQuery时，它将很容易并且跨浏览器兼容。你也可以这样做：

$('div').attr('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');

或者

$('div').css({
    'color': '#FFFFFF', 
    'display': 'block', 
    'padding': '8px 0 0 10px', 
    'border-bottom': 'solid 1px #ffffff', 
    'background-color': '#718296', 
    'font-size': '12px', 
    'font-family': 'tahoma'
});

可以使用jQuery的.css属性！：）

Answer 2

我建议使用.css from jQuery API.

Answer 3

在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)/, "");
   }
}

Answer 4

请参阅this fiddle。这是你想要的效果吗？它使用jQuery使Javascript更容易，但是通过切换CSS类而不是使用jQuery的.css()方法来切换样式。这有两个原因......首先是你应该按目的分开你的代码。 HTML应该是内容，CSS应该是样式，而Javascript应该仅用于逻辑（如果可能的话，不应该在Javascript中放置内容或样式）。第二个原因是使用Javascript切换类比切换样式要容易得多。

如何通过Javascript动态更改css

4 个答案:

使用jQuery使您的工作更简单！