使用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)'; });