javascript设置样式宽度80%?

标签 javascript styles percentage

我想将对象的宽度设置为 80%。父div宽度为100%

怎么了?

var howManyDivsIHave = document.querySelectorAll('#section div.divs').length;
if(howManyDivsIHave == "1"){
    var divs = document.getElementById("section").getElementsByClassName("divs");
    divs.style.width = "80%"; 
    divs.style.height = "80%";
    divs.style.margin = "10%";
}
else if (howManyDivsIHave == "2"){
    divs.style.width = "40%"; 
    divs.style.height = "40%";
    divs.style.margin-top = "30%";
    divs.style.margin-bottom = "30%";
    divs.style.margin-left = "5%";
    divs.style.margin-right = "5%"; 
}
else if (howManyDivsIHave == "3"){
    divs.style.width = "40%"; 
    divs.style.height = "40%";
    divs.style.margin = "5%";
}

最佳答案

更新:您仍然无法访问结果集中的各个成员。您需要遍历 getElementsByClassName 的结果因为您仍在尝试对结果集合而不是单个结果设置样式属性。您还需要调用 getElementsByClassName在您调用 querySelectorAll 之后或者你的 divs当您到达 else if 时,var 将超出范围 block 。您应该能够从原始答案中弄清楚如何构建循环,因此我将保留原样:


childNodes是一个数组。您需要遍历数组并在每个单独的元素上设置样式。在您发布的代码中,您在数组上设置样式,而不是单个 DOM 元素。尝试类似的东西

var divs = document.getElementById("section").childNodes;
for (var i = 0; i < divs.length; i++)
{
    divs[i].style.width = "80%"; 
    divs[i].style.height = "80%";
    divs[i].style.margin = "10%";
}

请注意 childNodes将包含 ID 为“section”的 DOM 元素的所有子元素,因此如果在“section”DOM 元素下有其他不是 div 的子元素,您不想对其应用此样式,那么您将需要做进一步的过滤。

关于javascript设置样式宽度80%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20226733/

相关文章:

javascript - 如何将状态与父组件传递给子组件

javascript - 将元素的innerHTML设置为随机字符串

javascript - 设置 JavaScript 弹出窗口的最小尺寸

xaml - 具有按钮样式 XAML 的单选按钮

Jquery .style 未定义

javascript - 如何获取稀疏数组中的下一个元素

java - 使用 html javafx 的工具提示

sql - 计算返回 0 的 SQL 中两列之间值的百分比差异

casting - 在Stylus中,如何将百分比转换为整数?

html - 父级父级的百分比宽度