在nav ul li上使用getElementById样式?

时间:2014-02-15 07:06:34

标签: javascript html css dom

我在这样的css文件中有一个样式用于下拉菜单,

nav ul li a 
        {
            display: block; 
            padding: 5px 4px;
            border-radius: 25px;
            color: #64FFFF; 
            text-decoration: none;
        }

我希望使用类似这样的东西来改变它

var TAG = document.getElementById("nav ul li a");
TAG.setAttribute("style", "padding: 25px 40px;");

但是它不起作用,是否可以这样做或者我是否需要另一种方法。我可以看到我有四种不同的标签可供参考但是如何使用JavaScript。我是否找到了父类并以某种方式向下工作?

5 个答案:

答案 0 :(得分:2)

您正在使用类似jQuery的选择器,在使用ID时需要提供getElementById

var TAG = document.getElementById("hello");
TAG.setAttribute("style", "padding: 25px 40px;");

Demo

Demo 2 (没什么好看的,只使用color属性而不是padding,以便效果可见)

标记看起来像

<nav>
    <ul>
        <li>
            <a href="#" id="hello">hello</a>
        </li>
    </ul>
</nav>

答案 1 :(得分:2)

document.getElementById搜索ID

document.getElementsByTagName搜索标记名称并返回与

匹配的数组

document.getElementsByClassName搜索类名并返回与

匹配的数组

现在,如果你想像jQuery一样document.querySelectorAll就是你想要的。

在哪一回合将返回一个数组。所以你需要循环它

var a = document.querySelectorAll('nav ul li a');
for(var i=0;i<a.length;i++){
  a[i].setAttribute('style','padding:25px 40px'); // a[i].style.padding="25px 40px";
}
 /*
  another way to loop which is partially faster
  var len = a.length;
  while(len--){
   a[len].setAttribute('style','padding:25px 40px");
   }
 */

答案 2 :(得分:0)

你不能以这种方式获取元素,你必须为每个标记赋予一个唯一的id,然后以下面的方式获取元素

var Tag=document.getElementById('uniqueId');

要获取未指定id的元素,必须按照以下方式使用jQuery

var element=jQuery(".nav ul li a");

element.css('padding','25px 40px');

答案 3 :(得分:0)

你可以使用querySelectorAll()的css选择器来获取匹配的元素,就像你的情况一样。

var tag = document.querySelectorAll('nav ul li a');
    tag[0].setAttribute("style", "padding: 250px 40px;");

答案 4 :(得分:0)

我会用另一种方法。我让浏览器为我做ccs匹配,只需在nav元素上添加一个类。

nav ul li a 
    {
        display: block; 
        padding: 5px 4px;
        border-radius: 25px;
        color: #64FFFF; 
        text-decoration: none;
    }
nav.alternate ul li a
    {
        padding: 25px 40px;
    }

你的javascript(假设只有一个标签导航并且它还没有类):

document.getElementsByTagName("nav")[0].className = "alternate"