使用javascript或jquery更改内联样式
使用javascript或jquery更改内联样式
提问于 2018-10-26 03:44:29
我正在尝试更改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);" ;
}
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-26 04:20:21
这个问题似乎与父元素有关，因为Index-gallery-item-inner类的大小比您试图制作的图像的高度要小。您应该能够使用style或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)'; });Stack Overflow用户
发布于 2018-10-26 04:15:21
这是因为getElementByClassname返回一个HTMLCollection，而querySelectorAll返回一个NodeList。你不能设置HTMLCollection项目的样式，只能获取它(我猜)
var items = document.querySelectorAll('.Index-gallery-item');
[].forEach.call(items, function(item) {
item.style.height = 'calc(100vh - 80px)';
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52996957
复制相关文章
相似问题