使用'香草'JS在选定的元素上设置CSS属性

JavaScript新手所以下面的问题可能是'愚蠢的'。使用'香草'JS在选定的元素上设置CSS属性

对于我的工作，我做了一点GreaseMonkey脚本，使我们的电子商务商店对我们的客户服务团队更加友好一点。通常我会为他们设置一个新的或更好的用户界面来设置一个特殊的角色或者其他东西，但是对于这个当前的系统，这实际上不是一种选择。

具体而言，我会选择链接visibility: hidden，因为它们会触发一些可锁定后端直到报告完成的报告功能。

到目前为止，我已经有脚本加载jQuery，这很好，但并不理想。然后我钻进来看到界面是使用YUI构建的，而这已经被加载，语法对我来说很奇怪，我不喜欢它，再加上它现在不被支持。

最近我发现了Plain JS网站，它描述了如何使用'香草'JS做类似jQuery的东西。 灿烂！我认为，现在我可以写简单的JS没有额外的依赖或库！但情况并非如此。

我曾尝试以下：

var links = Array.from(document.querySelectorAll("a")); // creates an actual array from the node list returned by document.query 
var links_to_hide = links.slice(14, 22); // gets just the bits we want to affect from the array, and is still an array 

// ok so 'links_to_hide' is an array, and it is an array of 'a' anchor tags. 
// if I go into the inspector and set the visibility property it affects the tag but doing it via scripting seems to not work. 
// so if links_to_hide is an array it should be possible to 

for(var i = links_to_hide.length; i <= links_to_hide.length; i++){ 
    links_to_hide.style['visibility'] = 'hidden'; 
} 
// this for loop doesn't seem to actually affect anything

我在想什么。就在我可以告诉这应该工作。

来源

2016-08-11 geekosupremo

更改此：

for(var i = links_to_hide.length; i <= links_to_hide.length; i++){ 
    links_to_hide.style['visibility'] = 'hidden'; 
}

对此

for(var i = 0; i < links_to_hide.length; i++){ 
    links_to_hide[i].style['visibility'] = 'hidden'; 
}

来源

2016-08-11 18:04:57

我还在JS上加速，为什么添加'[i]'有所作为？ – geekosupremo

变量links_to_hide是一个数组类型，如下所示; links_to_hide = [link_element1，link_element2，link_element3，...] 所以，你通过links_to_hide [i]到达每个数组项目，其中我是0,1,2 ... –

哦！这使得总体感觉！欣赏洞察力。 – geekosupremo

您没有使用i

links_to_hide[i].style.visibility = 'hidden';

来源

2016-08-11 18:02:34 Quentin

你的for循环应该有如下：

for(var i = 0; i < links_to_hide.length; i++){ 
    links_to_hide[i].style.visibility = 'hidden'; 
}

来源

2016-08-11 18:05:25 ivp

使用'香草'JS在选定的元素上设置CSS属性

回答

相关问题