Изменить CSS элемента DOM, который не имеет идентификатора с использованием Javascript

Question

Изменить CSS элемента DOM, который не имеет идентификатора с использованием Javascript

0

У меня есть <div> который отображается, и несколько <p> которые скрыты внутри

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

в настоящее время css

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

У меня есть регистр кнопок с id = register. когда я нажимаю эту кнопку, я хочу отобразить все <p>. не то, что я не могу использовать id для <p> и <div> и использовать только javascript.

Nisham Mahsin 10 май 2014, в 09:10

Источник

0

Но вы можете использовать для этого jQuery или нет? Если это так, то $ (document) .on ('click', '# register', function () {$ (". Ticket-price"). Show ()});
marcineck 10 май 2014, в 06:38
2

Ему не нужен jQuery
Totò 10 май 2014, в 06:39

Теги:

javascript

html

css

3 ответа

2

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

Вернет список узлов DOM, соответствующих этому селектору CSS. Вы можете перебирать этот список и устанавливать свойство display для block или того, что вам нужно

Totò 10 май 2014, в 04:10

1

    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";     
    }

raton 10 май 2014, в 05:45

Ещё вопросы

Но вы можете использовать для этого jQuery или нет? Если это так, то $ (document) .on ('click', '# register', function () {$ (". Ticket-price"). Show ()});

ReGdYN · Accepted Answer · 2014-05-10T04-58-00.000Z

Я представил решение на 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';
}