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

使用javascript或jquery更改内联样式

2 个答案: