首頁  >  問答  >  主體

javascript - 使用 bootstrap 設定元素的 class 後,如何修改該元素的 class?

我設定了一個元素的 class ,現在想透過 JavaScript 更改該元素的 class ,我試過 jQuery 的 attr 修改 class 屬性不行。
html:

<nav>
    <ul class="pager" id="pageCtr">
        <li class="previous" id="prevBTN">
            <a href="#" onclick="prevPage()"><span>&larr;</span>前一页</a>
        </li>
    </ul>
</nav>

js:

$('#prevBTN').className='previous disabled';
phpcn_u1582phpcn_u15822732 天前687

全部回覆(5)我來回復

  • 某草草

    某草草2017-05-18 10:49:55

    假設元素

    <p class="className" id="idValue"></p>

    可以這樣改

    var e = document.getElementById('idValue')
    if (e) {
        e.className = "changedClassName"
    }

    屢試不爽。

    jQuery把document.getElementById('idValue')改成$('#idValue')就好啦

    回覆
    0
  • 黄舟

    黄舟2017-05-18 10:49:55

    HTML:

    <p id="id_test" class="old-bootstrap">

    JS:

    $('#id_test').className='new_class';

    不是透過attr,而是通过className

    PS:
    如果你想為li添加屬性disabled可以這樣做,不是添加class而是attrli添加属性disabled可以这样做,不是添加class而是attr
    $('#prevBTN').attr('disabled', true);$('#prevBTN').attr('disabled', true);

    去除attr:

    方案1:a標籤不支援disabled屬性,所以你把a標籤換成button標籤就可以了:http://www.w3school.com.cn/ti...
    方案2:用a標籤也可以,去除它的href屬性就可以達到不能點擊的效果,即$('#prevBTN').removeAttr('href');
    參考:你把下面這段程式碼拿到這個上面運行

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    function test() {
        $('#id_test').removeAttr('href');
    }
    
    </script>
    </head>
    
    <body>
    <nav>
        <ul class="pager" id="pageCtr">
            <li class="previous" id="prevBTN">
                <a href="#" id="id_test" onclick="prevPage()"><span>&larr;</span>前一页</a>
            </li>
        </ul>
    </nav>
    <button id="id_test2" onClick="test()">disable</button>
    </body>
    </html>

    回覆
    0
  • 怪我咯

    怪我咯2017-05-18 10:49:55

    樓主的代碼是怎樣的?
    為什麼我這裡直接用attr()來設定class是可以的呢?

    另外,jQuery還有addClass()和removeClass這兩個方法,操作class 我通常會用這兩種方法。

    回覆
    0
  • 黄舟

    黄舟2017-05-18 10:49:55

    jQuery有專門操作class的方法,可以查相關API

    回覆
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-18 10:49:55

    感謝 @daryl 和 @tony_yin 的熱心解答,我自己也想用吧 <li> 标签里面的 <a> 换成 <button> ,能实现禁用按钮效果,但是 .pager 的 BootStrap 默认样式会变化;
    <li class="previous" id='prevBTN'> 换成 <li class="previous disabled" id='prevBTN'> 使用 document.getElementById('prevBTN').className='previous disabled'; 确实可行,但使用 jQuery 时会出现问题,$('prevBTN').className='previous disabled'; 就不能实现,主要原因是 $('prevBTN') 并不能得到 DOM 元素,而 className 是 DOM 里面的属性,$(selector) 只能得到滿足選擇器條件 DOM 元素集合,

    jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element.

    解決方法:$('prevBTN').get(0).className='previous disabled';

    回覆
    0
  • 取消回覆