Javascript 在nav ul li a样式上使用getElementById？

我在css文件中有一个下拉菜单样式

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

我想用DOM来改变它，就像这样

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

---

但它不起作用，是可以这样做，还是我需要另一种方法。我可以看到我有四个不同的标记要引用，但JavaScript怎么可能做到这一点呢。我是否找到了父类并以某种方式工作？

如果使用类似jQuery的选择器，则需要提供一个

ID

，就像使用

getElementById

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

（没什么特别的，只是使用了

颜色

属性，而不是

填充

，以便效果可见）

标记看起来像

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

如果使用类似jQuery的选择器，则在使用

getElementById

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

（没什么特别的，只是使用了

颜色

属性，而不是

填充

，以便效果可见）

标记看起来像

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

文档。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");
   }
 */

var a=document.querySelectorAll（'nav ul li a'）；
对于（var i=0；i
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");
   }
 */

var a=document.querySelectorAll（'nav ul li a'）；
对于（var i=0；i您不能以这种方式获取元素，您必须为每个a标记提供唯一的id，然后以以下方式获取元素

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

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

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

要在不指定id的情况下获取元素，必须按以下方式使用jQuery

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

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

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

您不能以这种方式获取元素，您必须为每个标记指定一个唯一的id，然后以以下方式获取元素

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

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

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

要在不指定id的情况下获取元素，必须按以下方式使用jQuery

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

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

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

您可以将css选择器与
queryselectoral（）
一起使用，以获取匹配的元素，在您的示例中就是这样

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

您可以将css选择器与
queryselectoral（）
一起使用，以获取匹配的元素，在您的示例中就是这样

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

我将使用另一种方法，我让浏览器为我进行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（假设只有一个标记nav，并且它还没有类）：

我将使用另一种方法，我让浏览器为我进行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（假设只有一个标记nav，并且它还没有类）：

nav ul li a
不是我所知道的元素，但是有没有办法通过其他标签访问锚定标签？@Ruud 100KB库，只需要一个字节的代码？为什么这个问题被否决了？只是因为OP不知道他在做什么？他分享了代码，他清楚地解释了这个问题，那么我们在什么基础上被否决了？@Mr.Alien y没错。对你来说也是这样。我们可以告诉他是新来的，这样我们就可以帮助他。有些人为了这个而投反对票，这太糟糕了。是的，他的密码通常对我来说都是一个被否决的问题，虽然在这里是新来的，告诉他是新来的，我却冒昧地向OP解释了。就像你一样。也对你的答案投了赞成票，因为我们是第一个首先lol
nav ul li a
不是我所知道的元素，但是有没有办法通过其他标签访问锚定标签？@Ruud 100KB库只需要一个字节的代码？为什么这个问题被否决了？只是因为OP不知道他在做什么？他分享了代码，他清楚地解释了这个问题，那么我们在什么基础上被否决了？@Mr、 外星人是的，没错。对你来说就是这样。我们可以告诉他是新来的，这样我们就可以帮助他。有些人为了这个而投反对票，这太糟糕了。是的，他的密码通常对我来说是一个投反对票的问题，虽然在这里是新来的，告诉他是新来的，我反而冒昧地向OP解释了。就像你一样。同样也投了你的反对票，因为我们第一个是jquery让我很害怕，但是加上一个信息！没问题。jquery是一个新手抓取器。虽然它确实有帮助，因为它具有跨浏览器兼容性的某些多边形填充。当人们投票反对你时，我添加了一个向上投票。没关系，它会发生。尽管我可以告诉你是JavaScript新手，所以我会尽力帮助你：D@EasyBB我投票我也不知道怎么回事，这里可能会用到研究成果，但任何人都可以通过发帖来澄清疑问question@Mr.Alien正是我的想法不知何故，jquery让我感到害怕，但在信息上加上一个！没问题。jquery是一个新手抓取器。虽然它确实有帮助，因为它具有跨浏览器兼容性的某些多边形填充。我添加了一个向上投票的人你投了反对票。没关系，这会发生的。虽然我可以告诉你你是JavaScript新手，所以我会尽力帮助你：D@EasyBB我也投了票，我不知道怎么了，这里可能会用到研究成果，但任何人都可以通过发帖来澄清疑问question@Mr.Alien正是我的想法