CODEWITHSUNDEEP
javascriptjquerystyles
deepu sankar
deepu sankar

Reputation: 4455

Add style dynamically not working

sorry for my english. i want to hide a div in my site. i am using this code

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

This work on all web browsers. but when i look in to this by my ipad. there is error present. After some google search i found that attr is not supported some ipad browsers. Then i can only use javascript for styling my website dynamically. when i use this code i got an error that

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

error is

  Uncaught TypeError: Cannot set property 'display' of undefined

if anyone know about this please help me.

Upvotes: 0

Views: 156

Answers (5)

dork
dork

Reputation: 4568

you could just use

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

Upvotes: 0

Vivek Parekh
Vivek Parekh

Reputation: 1085

You can do this:

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

Upvotes: 0

Mr.G
Mr.G

Reputation: 3559

try this pure javascript:

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

Upvotes: 0

AdityaParab
AdityaParab

Reputation: 7100

Try

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

Also,

is lib a class assigned to the ul element? In which case, the right way to do it is

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

Remove the space between the ul and .tab

UPDATE:

querySelectorAll returns an Array. That is why you can not directly use .style attribute. You will have to loop through that array to apply that style to the selected elements.

Upvotes: 3

Shijin TR
Shijin TR

Reputation: 7768

Try to use Jquery css()

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

Upvotes: 0

Related Questions