在nav ul li a style上使用getElementById

Question

我在 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怎么可能。我是否找到父类并以某种方式向下工作？

Answer 1

你正在使用jQuery这样的选择器，你需要提供一个ID，因为你正在使用getElementById

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

演示

演示 2（没什么好看的，只是使用了color属性而不是padding，以便效果可见）

标记看起来像

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

Answer 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");
   }
 */

Answer 3

您可以将 css 选择器与 querySelectorAll() 一起使用来获取匹配的元素，在您的情况下是这样的。

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

Answer 4

我会使用另一种方法。我让浏览器为我做 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"

Answer 5

你不能用这种方式获取元素，你必须给每个标签一个唯一的id，然后通过以下方式获取元素

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

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

var element=jQuery(".nav ul li a");
element.css('padding','25px 40px');