Question

我为<li>

定义了样式

#mainNav{clear:both;background-image: url(../images/bg_menu.jpg);width:975px;height:43px;color:#fff;margin-top:-25px;}
#mainNav ul{list-style: none;padding: 0;margin: 0;}
#mainNav ul li{line-height:43px;float:left;background-image: url(../images/bg_menu.jpg);font-size:15px;font-weight:normal;text-align:center;cursor:default;padding:0px 15px;}
#mainNav ul li:hover{background:#332a03;color:#f7df84;}
<div id="mainNav">
    <ul>
        <li>Home</li>
        <li>Training and Workshops</li>
        <li>Community Consultations</li>
        <li>Community Surveys</li>
        <li>Program and Facility Assesments</li>
        <li>Reports</li>
    </ul>
 </div>

我现在想要返回并将<li>的填充更改为'0px 14px'，因为由于某种原因它不能仅在Mac上的Firefox上呈现。所以到目前为止我有这个脚本......

var browser = "other";
var OpSys = "other";
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
    browser = "Firefox";
}
if (navigator.userAgent.indexOf('Win') != -1) {
    OpSys = "Macintosh";
}
// if its a Mac and Firefox, then change the padding
if (OpSys == "Macintosh" && browser == "Firefox") {
    // how do I change the padding for each <li> ?
}

Answer 1

使用jQuery：

jQuery("div#mainNav li").each(function() {
   var $li = jQuery(this);
   $li.css("padding", "0px 14px 0px 0px");       
});

没有jQuery：

var liArr = document.getElementsByTagName("LI");

for(var i = 0; i < liArr.length; i++) {
    var parent = liArr[i].parentNode;
    var grandParent = parent.parentNode;

    if(grandParent != null && grandParent.id == "mainNav") {
       liArr[i].style.padding = "0px 14px 0px 0px";
    }        
}

使用javascript更改<li> style </li>

1 个答案: