CODEWITHSUNDEEP
javascripthtmlcss
Nisham Mahsin
Nisham Mahsin

Reputation: 1399

Change css of a DOM element that does not have an id using Javascript

I have a <div> that is displayed and several <p> which are hidden inside that 

<div class="em-booking-form-details">
<p class="ticket-price">
.........
.........
</div>

currently css is 

.em-booking-form-details p{
    display:none;
}

i have a button register with id=register. when i click this button i want to be displayed all the <p> s . not that i cant use id for <p> and <div> and only use javascript.

Upvotes: 0

Views: 60

Answers (3)

raton
raton

Reputation: 428

    var div = document.getElementsByClassName("em-booking-form-details")
    var p = div[0].getElementsByTagName('p')
    for(var i=0;i<p.length;i++){
            p[i].style.display = "block";       
    }   





    var p = document.getElementsByClassName('ticket-price')
    var all = p[0].parentElement.children
    for(var i=0;i<all.length;i++){
            all[i].style.display = "block";     
    }

Upvotes: 1

ReGdYN
ReGdYN

Reputation: 536

I provided a solution on jsFiddle http://jsfiddle.net/L5Xsg/ 

var dom_elements = document.querySelectorAll('.em-booking-form-details p');
var dom_length = dom_elements.length;

console.log(dom_elements);
for(var i = 0 ; i < dom_length ; i++) {
    dom_elements[i].style.display = 'block';
}

Upvotes: 2

Tot&#242;
Tot&#242;

Reputation: 1854

document.querySelectorAll('.em-booking-form-details p')

Will return a list of DOM nodes that match that CSS selector. You can iterate over that list and set the display property to block or whatever you need

Upvotes: 2

Related Questions