使用javascript或jquery更改内联样式

Question

I am trying to change an inline style on my squarespace site that is automatically set by one of the style options on page load. I want to change the height specifically of the background images, I am trying with several different methods but none have an effect. If I go and make the change manually then it comes out just how I want. I tried searching but for some reason nothing I've found is working.

trying to change the banner on this page here: https://saffron-hawk-jh9a.squarespace.com/applications/

you can see the black space where the banner images should be. I console.logged the element collection, so they are there and that's where i found the property for csstext. Any help greatly appreciated!

//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

It's because getElementByClassname returns a HTMLCollection and querySelectorAll returns a NodeList. You can't set style of HTMLCollection item, only get it (I guess)

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

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

Answer 2

The issue appears to be related to the parent element with the class of Index-gallery-item-inner is sized with a height that is less than what you are trying to make the images. You should be able to fix this with either a style or a javascript command

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

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