在nav ul li上使用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，您需要在使用getElementById提供一個ID

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

您不能以這種方式獲取元素，必須為每個標簽賦予唯一的ID，然后按照以下方式獲取元素

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

要獲取元素而不指定id，您必須按以下方式使用jQuery

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

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

Answer 4

您可以將css選擇器與querySelectorAll()以獲取匹配的元素，在您的情況下，類似這樣。

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

Answer 5

我會使用另一種方法。 我讓瀏覽器為我完成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"