javascript - 在 Javascript 中动态地将边界半径分配给 li 第一个 child

Question

我正在尝试为第一个和最后一个 child 创建一个带圆 Angular 的导航栏(使用无序列表)。我想使用 onclick javascript 函数并在 javascript 中动态分配圆 Angular 。这是我试过的代码。任何人都可以指出原因和/或建议解决方案或资源吗？非常感谢。

HTML:

                   <nav>
                        <ul id="navBar">
                            <li><a href="#" title="View"><div class="menu" onClick="select(this)">View</div></a></li>
                            <li><a href="#" title="Duplicate"><div class="menu" onClick="select(this)">Duplicate</div></a></li>
                            <li><a href="#" title="Edit"><div class="menu" onClick="select(this)">Edit</div></a></li>
                            <li><a href="#" title="Delete"><div class="menu" onClick="select(this)">Delete</div></a></li>
                    </ul>
                  </nav>

Javascript:

  document.getElementById('ul#navBar li:first-child').style.MozBorderRadiusTopleft = '13px';
document.getElementById('ul#navBar li:first-child').style.MozBorderRadiusBottomleft = '13px';
document.getElementById('ul#navBar li:last-child').style.MozBorderRadiusTopRight = '13px';
document.getElementById('ul#navBar li:last-child').style.MozBorderRadiusBottomRight = '13px';

Answer 1

样式表的 CSS:

.is-rounded li:first-child {
    -moz-border-radius: 13px 0 0 13px;
    -webkit-border-radius: 13px 0 0 13px;
    border-radius: 13px 0 0 13px;
}

.is-rounded li:last-child {
    -moz-border-radius: 0 13px 13px 0;
    -webkit-border-radius: 0 13px 13px 0;
    border-radius: 0 13px 13px 0;
}

Javascript:

function makeRounded(e) {
   document.querySelector('#navBar').className += 'is-rounded';
}

document.querySelector('#el').addEventListener('click', makeRounded, false);

这里假定 id 为“el”的元素是在单击时触发整个事件的元素。

参见示例:http://jsfiddle.net/cgrFe/3/

你似乎对这方面了解甚少。几本书可以帮助您入门:http://domscripting.com/book/和 http://domenlightenment.com/ .两者中的最后一个相当新，但一定不错。