动态添加样式不起作用答案

【问题标题】：Add style dynamically not working动态添加样式不起作用
【发布时间】：2014-03-13 06:40:08
【问题描述】：

对不起我的英语。我想在我的网站中隐藏一个 div。我正在使用此代码

  $('ul .tab li').attr("style", "display: none");

这适用于所有网络浏览器。但是当我通过我的 ipad 看这个时。存在错误。经过一些谷歌搜索后，我发现某些 ipad 浏览器不支持 attr。然后我只能使用 javascript 来动态设置我的网站样式。当我使用这段代码时，我得到了一个错误

  document.querySelectorAll('ul .tab li').style.display = "none";
  document.querySelectorAll('ul .tab li li').style.display = "block";

错误是

  Uncaught TypeError: Cannot set property 'display' of undefined

如果有人知道这件事，请帮助我。

【问题讨论】：

标签： javascript jquery styles

【解决方案1】：

试试

$('ul .tab li').css("display", "none");

还有，

lib 是分配给ul 元素的类吗？在这种情况下，正确的做法是

$('ul.tab li').css("display", "none");

删除ul和.tab之间的空格

更新：

querySelectorAll 返回一个Array。这就是为什么您不能直接使用.style 属性的原因。您必须遍历该数组才能将该样式应用于所选元素。

【讨论】：

jQuery 的.css() 是解决这个问题的正确方法。

【解决方案2】：

尝试使用Jquery css()

  $('ul .tab li').css("display", "none");
   AND
  $('ul .tab li').css("display", "block");

【讨论】：

【解决方案3】：

试试这个纯 javascript：

var list=document.getElementsByTagName("UL")[0];
var list1=list.getElementsByClassName('tab'); 
list1.getElementsByTagName("LI")[0].style.display = "none";

【讨论】：

如果 OP 已经在页面中有 jQuery，也可以使用它。

【解决方案4】：

你可以这样做：

var nodes = document.querySelectorAll('ul .tab li');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].style.display = 'block'; //Or none
}

Here is a simple example

【讨论】：

如果 OP 已经在页面中拥有 jQuery，也可以使用它。
但正如@deepu 建议的那样，使用 javascript 作为 jQuery 在少数 ipad 版本上不起作用。
.attr() 不是您应该在任何浏览器/设备中设置.style 属性的方式。 jQuery .css() 可以很好地设置样式属性（在所有 iPad 上），因为这就是它的目的。 OP 的问题是滥用 .attr() 而不是 iPad 的 jQuery 问题。
哦！：原来如此。！谢谢你:)

【解决方案5】：

你可以使用

$('ul .tab li').hide();

【讨论】：