Question

我写这篇文章是为了在owl-carousel幻灯片中找到一个视频元素，然后仅为该特定幻灯片设置owl-carousel控件的CSS（此控件出现在网页的运行时）。

代码根本不起作用，我是新手使用js。

$(".item").children().find("video").each(function(){
    var d = document.getElementByClass('owl-controls');
    d.style.bottom = y_pos+'10px';
});

对于HTML

<div id="post-media" class="owl-carousel item-2">
    <div class="item"><img src="images/fullimage1.jpg" alt="The Last of us"></div>
    <div class="item">
        <video controls="" class="embed-responsive-item" style="width:100%; height:100%">
            <source src="video/clip1.mp4" type="video/mp4">
        </video>
    </div>
    <div class="owl-controls clickable">
        <div class="owl-pagination">
            <div class="owl-page active">
                <span class=""></span>
            </div>
            <div class="owl-page">
                <span class=""></span>
            </div>
        </div>
    </div>
</div>

Answer 1

如果您只想改变owl-controls的位置，则不需要jquery。您只能使用CSS：

.owl-carousel .owl-controls
{
   margin-top:10px;
}

Answer 2

如果您了解css3，则可以对jQuery使用相同的查询

$(".item video").each(function(){
    var d = document.getElementByClass('owl-controls');
    d.style.bottom = y_pos+'10px';
});

如何在owl-carousel幻灯片中查找视频元素，然后仅为该特定幻灯片设置owl-carousel控件的css

2 个答案: