使用javascript或jquery更改内联样式

Question

我正在尝试更改我的Squarespace网站上的内联样式，该样式由页面加载时的样式选项之一自动设置。 我想专门更改背景图像的高度，我正在尝试几种不同的方法，但是都没有效果。 如果我去手动进行更改，那么它就是我想要的。 我尝试搜索，但是由于某种原因，我什么都没找到。

尝试在此处更改此页面上的横幅： https : //saffron-hawk-jh9a.squarespace.com/applications/

您可以看到横幅图像应在的黑色空间。 我console.logged元素集合，所以它们在那里，这就是我找到csstext属性的地方。 任何帮助，不胜感激！

//jquery
$('.Index-gallery-item').css({ height: "calc(100vh - 80px;)"} );

/js
document.addEventListener("DOMContentLoaded", function(event) { 

var els = document.getElementsByClassName("Index-gallery-item");
console.log(els);

for ( var i=0; i< els.length ; i++){
console.log(i);

document.getElementsByClassName("Index-gallery-item")[i].setAttribute("style", "height:calc(100vh - 80px);");

els[i].style.cssText = "height : calc(100vh - 80px);" ;
els[i].style.height = "calc(100vh - 80px);" ;

}


});

Answer 1

这是因为getElementByClassname返回HTMLCollection，而querySelectorAll返回NodeList。 您不能设置HTMLCollection项目的样式，只能获取它（我想）

var items = document.querySelectorAll('.Index-gallery-item');

[].forEach.call(items, function(item) {
    item.style.height = 'calc(100vh - 80px)'; 
});

Answer 2

问题似乎与父元素有关，其Index-gallery-item-inner类的高度设置为小于您要制作图像的高度。 您应该可以使用样式或javascript命令来解决此问题

//css
.Index-gallery-item-inner { height: calc(100vh - 80px); }

//js
document.querySelectorAll('.Index-gallery-item-inner').forEach(image => { image.style.height = 'calc(100vh - 80px)'; });