如何使用Javascript设置所有元素的样式？无Jquery（描述中有2个示例）

我用Javascript编写了两个脚本。脚本的结果必须相同，但它们不是。如何用Javascript编写Jquery函数.css（），以便得到相同的结果

脚本1（不工作）：

脚本2（工作，但使用jQuery！）：

---

（顺便说一句，我只是想知道，为了提高我的Javascript知识，并了解Jquery.css（）函数是如何构建的。）

您需要更改所有项的宽度

var numItems = 0;

function addItem() {
    var menu = document.getElementById('menu');
    var addLink = document.createElement('a');

    var input = document.getElementById('input');
    var text = input.value;

    addLink.innerHTML = text;
    menu.appendChild(addLink);
    addLink.setAttribute('href', text + '.html');

    numItems++;
    var itemWidth = (100 / numItems) + '%';
    var as = menu.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
        as[i].style.width = itemWidth;
    }
}

var numItems=0；
函数addItem（）{
var menu=document.getElementById（'menu'）；
var addLink=document.createElement（'a'）；
var input=document.getElementById（'input'）；
var text=input.value；
addLink.innerHTML=文本；
menu.appendChild（addLink）；
addLink.setAttribute（'href'，text+'.html'）；
numItems++；
变量itemWidth=（100/numItems）+'%'；
var as=menu.querySelectorAll（'a'）；
对于（变量i=0；i

---

演示：

事实上我不明白为什么这条线不起作用。。。您是否检查了错误控制台？在第一个代码段中，您仅调整新创建的

a

元素的宽度，在第二个代码段中，您将更改所有链接。与css（）函数无关，但与如何选择应用该函数的对象范围有关。您必须遍历

菜单的所有子项，然后应用
.style.width=itemWidth发送给他们。因为jQuery代码就是这样做的。添加的每个元素都会改变样式，但添加新元素时，前面的元素不会改变。第一个元素的宽度为100%，第二个元素的宽度为50%，依此类推。问题是，我希望所有元素的宽度相同。所以：当有4个元素时，我希望所有元素都是25%，而不是1加100%，1加50%，33.3%和25%。@Werner:在除法发生之前它会增加，所以
100/1
是的！应该隔开。非常感谢！这个和其他答案真的帮助了我！
function addItem() {

    var numItems = $("#menu a").length+1;

    var itemLink = document.createElement('a');
    var input = document.getElementById('itemName');
    var text = input.value;

    itemLink.innerHTML = text;
    document.getElementById('menu').appendChild(itemLink);
    itemLink.setAttribute('href',text+'.html');

    var itemWidth = (100/numItems);

    $("#menu a").css("width", itemWidth+"%");

}

var numItems = 0;

function addItem() {
    var menu = document.getElementById('menu');
    var addLink = document.createElement('a');

    var input = document.getElementById('input');
    var text = input.value;

    addLink.innerHTML = text;
    menu.appendChild(addLink);
    addLink.setAttribute('href', text + '.html');

    numItems++;
    var itemWidth = (100 / numItems) + '%';
    var as = menu.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
        as[i].style.width = itemWidth;
    }
}