无法在javascript中设置元素的CSS样式

Not able to set CSS style of an element in javascript

本文关键字：元素 CSS 样式 设置 javascript      更新时间：2023-09-26

hi我有一个带有一些列表元素的无序列表，我想设置一个css样式来突出显示所选的列表元素我正在尝试，但它对样式没有影响

function SelectThis(ctrl) {
    var list = document.getElementById("myslidemenu").getElementsByTagName('li');
    for (i = 0; i < list.length; i++) {
        list[i].style.color = "blue";
    }
    ctrl.style.color = 'white';
}

我的html看起来像这个

<div id="myslidemenu" class="jqueryslidemenu">
    <ul>
        <li onclick="SelectThis(this);"><a href="Dashboard.aspx">Dashboard</a>
        </li>
        <li onclick="SelectThis(this);"><a href="Geofence.aspx">Geofence</a>
        </li>
        <li onclick="SelectThis(this);"><a href="Personnel.aspx">Personnel</a>
        </li>
    </ul>
    <br style="clear: left" />
</div>

这个div标记在另一个div标记中，我不能以某种方式越过内部的div标记来更改Ul 中所选的li

我的css就像这个

.jqueryslidemenu ul li a:hover{
 background: black; /*tab link background during hover state*/
  color: Yellow;
  }
.jqueryslidemenu{
font: bold 12px Arial;
background: #414141;
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
height: 1%;
}

您应该更改<a>元素的样式，而不是<li>。<li>的样式已更新，但<a>有自己的样式，应该用JS覆盖。

您是否要更改背景？像那样？

我在测试中删除了锚，这样就不会产生404个错误。

function SelectThis(ctrl) {                         
    var list = document.getElementById("myslidemenu").getElementsByTagName('li');
    for (i = 0; i < list.length; i++) {
        list[i].style.background = 'blue';
    }
    ctrl.style.background = 'white';
}

您正在尝试的操作不起作用，因为您的页面正在刷新

例如，如果你点击链接，浏览器会重定向你的链接

所以点击页面加载后，你可以查看当前页面，在菜单中找到链接，并为提供css

将此脚本放入页面

    $(document).ready(function () {
        var page = top.location.toString().split("/");
        alert(page[page.length - 1].toString());
        $('#myslidemenu li').css('color', 'blue');
        $('#myslidemenu').find('a[href="' + page[page.length - 1].toString() + '"]').closest('li').css('color', 'white');
    });

在文档就绪时，它获取页面名称并找到包含href=当前页面的锚标记，并更改其最接近的li颜色；

相关文章：