用Javascript改变现有的CSS

Change existing CSS with Javascript

本文关键字：CSS Javascript 改变      更新时间：2023-09-26

我有两个div在彼此的顶部，并通过点击一个按钮想要改变z-index为100的函数。听起来很简单，有几百个例子，但行不通。所有的例子都有一个共同点，那就是在函数实现之前没有现有的CSS代码，这可能是问题所在吗?

按钮:

<button type="button" id="trailerButton" class="btn btn-default btn-sm" style="margin-top: 20px;">
   <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Choose a trailer
</button>

脚本:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
       $("#trailerButton").click(function () {
          $("#chooseTrailer").css("z-index", "100");
       });
    });
</script>
CSS: 

position: relative;
z-index: 1;

为z-index工作，将position: relative或position: absolute添加到该元素的css。或者使用jquery

$('#trailerButton').click(function() {
    $('#chooseTrailer').css('z-index', '100');
    $('#chooseTrailer').css({ 'position': 'relative' });
});

对上面答案的补充:

$('#trailerButton').click(function() {
    $('#chooseTrailer').css({
              'position':'relative',
              'z-index':'999999'});
});

您可以通过将所有内容放在{}括号中并使用:对象符号来实现。

或者，你可以尝试用cssText设置!important，但这会覆盖该元素的所有其他CSS:

$('#trailerButton').click(function() {
        $('#chooseTrailer').css({'cssText', 'z-index: 999999 !important'});
相关文章：