鍍金池/ 問答/HTML/ jq動態(tài)創(chuàng)建標簽元素

jq動態(tài)創(chuàng)建標簽元素

    #bbox{
        position: absolute;
        top: 166px;
        left: 219px;
        background: #fff;
        width: 548px;
        border: 1px solid #999;
    }
    #bbox #seach-ul{
        list-style: none;
    }
    #bbox #seach-ul li{
        height: 50px;
        line-height: 30px;
        padding-left: 10px;
    }
    #bbox #seach-ul li:hover{
        background: #e5e5e5;
        text-decoration: underline;
    }
    //body
    <div id="bbox" style="display: none;">
        <ul id="seach-ul">
        </ul>
    </div>
    //script
    $('#txt').on('keyup', function (e) {
        var text = $('#txt').val();
        var html = '';
        html += '<li>' + text + '</li>'
        $('#seach-ul').html(html);
        $('#bbox').show();

    });

為什么動態(tài)添加完li之后，先前的設(shè)置的樣式不見了

回答
編輯回答
醉淸風

代碼片段能跑,沒問題.是不是有其他的樣式把樣式覆蓋了?

2017年4月22日 22:01
編輯回答
晚風眠

樣式是生效了呀。測試地址。
emmmm還有一種情況，就是你用打包的形式。打進去的css。有可能帶有其他標識。比如vue的css模塊。

clipboard.png

2018年6月30日 00:26
編輯回答
孤客

樣式都在的，你的代碼沒有問題。

你看下樣式是不是沒有生效，或者沒有正確的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
         #bbox{
        position: absolute;
        top: 166px;
        left: 219px;
        background: #fff;
        width: 548px;
        border: 1px solid #999;
    }
    #bbox #seach-ul{
        list-style: none;
    }
    #bbox #seach-ul li{
        height: 50px;
        line-height: 30px;
        padding-left: 10px;
    }
    #bbox #seach-ul li:hover{
        background: #e5e5e5;
        text-decoration: underline;
    }
    </style>
</head>
<body>
<div id="bbox" style="display: none;">
        <ul id="seach-ul">
        </ul>
    </div>

    <input type="text" id="txt" name="">
    
    <script type="text/javascript">
         $('#txt').on('keyup', function (e) {
        var text = $('#txt').val();
        var html = '';
        html += '<li>' + text + '</li>'
        $('#seach-ul').html(html);
        $('#bbox').show();

    });
    </script>
</body>
</html>
2017年11月22日 22:54