简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 使用 bootstrap 設定元素的 class 後，如何修改該元素的 class？
phpcn_u1582
phpcn_u1582 2017-05-18 10:47:55
0
5
630

我設定了一個元素的 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_u1582
phpcn_u1582

全部回覆(5)
某草草
某草草2017-05-18 10:49:55 5樓

假設元素

<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 4樓

HTML:

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

JS:

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

不是透過attr，而是通过className

PS:
如果你想為li添加屬性disabled可以這樣做，不是添加class而是attr ：li添加属性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 3樓

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

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

點贊 +0
新增回覆
黄舟
黄舟2017-05-18 10:49:55 2樓

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

點贊 +0
新增回覆
淡淡烟草味
淡淡烟草味2017-05-18 10:49:55 1樓

感謝 @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
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！