使用Javascript更改没有id的DOM元素的css

Question

我显示了<div>，其中隐藏了几个<p>

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

目前 css是

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

我有一个id = register的按钮寄存器。当我点击这个按钮时，我希望显示所有<p>个。不是我不能使用<p>和<div>的ID，而只使用javascript。

Answer 1

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

将返回与该CSS选择器匹配的DOM节点列表。您可以迭代该列表并将display属性设置为block或您需要的任何内容

Answer 2

我在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';
}

Answer 3

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